Shopify

  • Tích hợp Shopify với GitHub

    Trước đây, Shopify Theme Kit đã giúp việc phát triển giao diện trở nên dễ dàng hơn. Tuy nhiên, một hạn chế lớn là nếu ai đó chỉnh sửa mã giao diện trực tiếp trên trình chỉnh sửa của Shopify, những thay đổi đó sẽ không được phản ánh trong môi trường cục bộ của bạn, dẫn đến xung đột và lỗi.

    Để khắc phục điều này, Shopify CLI và tích hợp GitHub đã được giới thiệu, đảm bảo rằng các thay đổi được thực hiện trong trình chỉnh sửa giao diện của Shopify sẽ được phản ánh trong môi trường cục bộ và ngược lại.


    Kết Nối GitHub Với Shopify

    Bước 1:

    • Đăng nhập vào cửa hàng Shopify của bạn và nhấp vào phần Online Store từ thanh bên trái.
    • Ngay bên dưới giao diện trực tiếp của bạn, bạn sẽ tìm thấy tùy chọn Add Theme.
    • Một menu thả xuống sẽ xuất hiện, chọn Connect from GitHub.

    Bước 2:

    • Sau khi nhấp vào Connect from GitHub, ở phía bên phải, bạn sẽ thấy nút để Đăng nhập vào tài khoản GitHub của mình.
    • Bạn sẽ được chuyển hướng đến trang nơi bạn có thể cấp các quyền cần thiết.
    • Bạn có thể chọn cho phép Shopify truy cập vào các kho lưu trữ cụ thể thay vì cung cấp quyền truy cập vào tất cả các kho lưu trữ của bạn. Chọn tùy chọn Only select repositories, sau đó chọn tên kho lưu trữ từ menu thả xuống và nhấp vào Install.
  • Quản lý phiên bản Giao diện Shopify bằng GitHub


    Khởi tạo kho lưu trữ cục bộ

    Kho lưu trữ cục bộ ở đây đề cập đến thư mục dự án chứa giao diện Shopify mà chúng ta đã kéo từ cửa hàng của mình.

    Vui lòng làm theo bài viết này nếu bạn chưa thiết lập môi trường của mình.

    Vì vậy, bước đầu tiên để quản lý dự án của bạn với Git là khởi tạo nó. Thực hiện các bước đơn giản sau:

    Bước 1: Khởi Tạo Git Trong Thư Mục Dự Án Của Bạn

    Mở thư mục dự án của bạn trong trình chỉnh sửa mã ưa thích và khởi tạo Git bằng cách chạy lệnh sau:

    git init

    Lệnh này khởi tạo một kho lưu trữ Git mới trong thư mục dự án của bạn, cho phép Git bắt đầu theo dõi các thay đổi trong các tệp của bạn.

    Bước 2: Thêm Các Tệp Của Bạn Vào Khu Vực Staging

    Để bắt đầu theo dõi các thay đổi trong các tệp của bạn, bạn cần thêm chúng vào khu vực staging. Chạy lệnh:

    git add .

    Lệnh này đưa tất cả các tệp trong thư mục dự án của bạn vào khu vực staging cho lần commit tiếp theo.

    Đảm bảo rằng bạn đã thêm tất cả các tệp và thư mục cần thiết trước khi tiếp tục.

    Bước 3: Thực Hiện Commit Ban Đầu Của Bạn

    Sau khi các tệp của bạn đã được staging, đã đến lúc thực hiện commit ban đầu của bạn. Sử dụng lệnh sau:

    git commit -m "Initial Commit"

    Bằng cách thực hiện lệnh này, bạn tạo một ảnh chụp nhanh của trạng thái hiện tại của dự án của bạn.

    Việc thêm một thông điệp commit có ý nghĩa là rất quan trọng vì nó giúp bạn và các thành viên trong nhóm hiểu các thay đổi đã được thực hiện trong commit cụ thể này.



    Tạo kho lưu trữ từ xa trên GitHub

    Để đảm bảo rằng các thay đổi cục bộ của bạn được lưu trên GitHub, hãy làm theo các bước sau:

    Bước 1: Tạo kho lưu trữ mới

    1. Mở GitHub và đăng nhập vào tài khoản của bạn.
    2. Nhấp vào biểu tượng ‘+’ ở góc trên bên phải và chọn “New repository”.
    3. Chọn một tên phù hợp cho kho lưu trữ của bạn, nơi bạn sẽ đẩy giao diện phát triển của mình và cấu hình các cài đặt khác nếu cần.
    4. Cuối cùng, nhấp vào nút “Create repository” để tạo kho lưu trữ từ xa mới của bạn trên GitHub.

    Bước 2: Liên kết kho lưu trữ cục bộ và từ xa

    Sau khi tạo kho lưu trữ từ xa trên GitHub, bạn cần kết nối nó với kho lưu trữ cục bộ của mình.

    Lệnh 1: Thêm URL kho lưu trữ từ xa

    git remote add origin your-repository-url

    Thay thế your-repository-url bằng URL của kho lưu trữ từ xa của bạn.

    Lệnh 2: Đẩy các thay đổi của bạn lên GitHub

    git push -u origin master

    Lệnh này đẩy các thay đổi cục bộ của bạn lên nhánh master của kho lưu trữ từ xa trên GitHub.

    Bước 3: Tạo nhánh phát triển

    Tạo một nhánh phát triển để làm việc trên các tính năng hoặc sửa lỗi mới mà không ảnh hưởng đến nhánh chính.

    git checkout -b development

    Lệnh này tạo và chuyển sang nhánh development.

    Bước 4: Gộp nhánh phát triển Với Nhánh mặc định

    Sau khi hoàn thành công việc trên nhánh phát triển, bạn có thể gộp nó vào nhánh chính.

    git checkout master
    git merge development

    Lệnh đầu tiên chuyển về nhánh master, và lệnh thứ hai gộp các thay đổi từ nhánh development vào master.

  • Tạo môi trường để phát triển Shopify Themes

    Yêu cầu:

    1. Tài khoản Đối tác Shopify và Cửa hàng Shopify: Nếu bạn muốn sử dụng cửa hàng phát triển để làm việc trên một giao diện, hãy tạo hoặc đăng nhập vào tài khoản Đối tác Shopify, sau đó tạo một cửa hàng phát triển nếu bạn chưa có. Nếu bạn muốn làm việc trên một cửa hàng đã được thiết lập, hãy đảm bảo bạn có tài khoản cộng tác viên hoặc nhân viên với quyền “Quản lý giao diện” hoặc bạn là chủ sở hữu cửa hàng.
    2. Node.js: Cài đặt phiên bản mới nhất của Node.js, vì nó cần thiết để chạy các công cụ cần thiết cho phát triển giao diện Shopify.
    3. Git: Cài đặt Git để quản lý kiểm soát phiên bản và dễ dàng cộng tác với các nhà phát triển khác.
    4. Shopify CLI: Đảm bảo bạn đã cài đặt Shopify CLI trên hệ thống của mình cùng với mọi thứ được đề cập trong tài liệu Shopify CLI. Nếu bạn chưa cài đặt, hãy tham khảo tài liệu Shopify CLI để biết hướng dẫn cài đặt và sau đó bạn có thể sử dụng lệnh dưới đây.
    npm install -g @shopify/cli @shopify/theme


    Thiết lập Môi trường Phát triển Cục bộ

    Bước 1: Tạo Thư mục Dự án

    Tạo một thư mục dành riêng cho dự án của bạn và điều hướng đến nó:

    mkdir ten-thu-muc-cua-ban
    cd ten-thu-muc-cua-ban

    Bước 2: Kéo Giao diện từ Cửa hàng của Bạn

    Sử dụng lệnh sau để kéo giao diện từ cửa hàng của bạn về hệ thống cục bộ:

    shopify theme pull --store=ten-cua-hang-cua-ban.myshopify.com
    • Nếu đây là lần đầu tiên bạn chạy lệnh trên, bạn sẽ được yêu cầu đăng nhập vào Shopify.
    • Nếu bạn đã đăng nhập vào cửa hàng của mình ít nhất một lần, bạn sẽ được yêu cầu chọn giao diện.
    • Chọn giao diện bạn muốn và nhấn Enter để bắt đầu tải xuống.

    Bước 3: Mở Trình soạn thảo Mã của Bạn

    Khởi chạy trình soạn thảo mã ưa thích của bạn và tải thư mục dự án bạn đã tạo trước đó.

    Bạn sẽ thấy tất cả các tệp có trong giao diện cửa hàng của bạn hiện có sẵn trong thư mục cục bộ.

    Bước 4: Khởi tạo Phát triển Giao diện

    Thực hiện lệnh sau trong terminal của trình soạn thảo mã của bạn (đảm bảo bạn đang ở trong thư mục dự án):

    shopify theme dev

    Lệnh này sẽ tạo một giao diện phát triển, cho phép bạn thực hiện các sửa đổi cục bộ mà không ảnh hưởng đến cửa hàng trực tuyến của bạn.

    Bước 5: Xem trước Giao diện Phát triển trong Môi trường Cục bộ

    Sau khi bạn chạy shopify theme dev, bạn có thể tương tác với giao diện của mình trong trình duyệt. Shopify CLI tải lên giao diện như một giao diện phát triển trên cửa hàng.

    Lệnh sẽ trả về một URL tự động tải lại các thay đổi cục bộ, cho phép bạn xem trước các thay đổi trong thời gian thực bằng cách sử dụng dữ liệu của cửa hàng.

    Bạn có thể điều hướng đến http://127.0.0.1:9292 để mở bản xem trước giao diện trong trình duyệt của mình.

    Bước 6: Xem trước Các Thay đổi Được Thực hiện trong Mã Cục bộ của Bạn

    Hãy thoải mái chỉnh sửa mã của giao diện phát triển của bạn và xem trước các thay đổi trong thời gian thực. Ví dụ, bạn có thể muốn điều chỉnh văn bản hiển thị trong thanh thông báo của cửa hàng của mình.

    Khi bạn đã hài lòng với các thay đổi của mình, bạn có thể dễ dàng đẩy chúng lên kho GitHub của mình và sau đó triển khai chúng lên cửa hàng trực tuyến của bạn.