Effettuare il Deploy di Temi Shopify con GitLab
Khurram Bashir
Khurram Bashir
Pubblicato il 23 agosto 2024

Effettuare il Deploy di Temi Shopify con GitLab

23 agosto 2024
12 min
Shopify

Esportazione tema

1. Accedi al tuo account Shopify

Vai su shopify.com e accedi al tuo account.

2. Vai alla sezione Tema

Dal pannello di controllo Shopify, clicca su "Online Store" (Negozio online) nel menu di sinistra. Qui vedrai la sezione "Themes" (Temi).

3. Seleziona il tema da esportare

Nella sezione "Current theme" (Tema attuale), troverai il tema attualmente in uso. Se vuoi esportare un tema diverso, scorri verso il basso fino alla sezione "Theme library" (Libreria temi) per vedere altri temi che hai caricato.

4. Esporta il tema

Clicca sul pulsante con i tre puntini accanto al tema che desideri esportare. Dal menu a tendina, seleziona "Download theme file" (Scarica file del tema). Shopify preparerà un file ZIP del tema e lo invierà via email all'indirizzo collegato al tuo account Shopify.

5. Scarica il tema

Controlla la tua email e scarica il file ZIP del tema. Ora hai una copia del tema sul tuo computer che puoi utilizzare per backup, modifiche locali o per caricare su un altro negozio Shopify.

Nota:

L'esportazione del tema include tutti i file del tema, ma non include i contenuti (prodotti, pagine, collezioni, ecc.) o le impostazioni specifiche del negozio.    

Creazione Repository Gitlab

Per creare un repository su GitLab per gestire il tema o lo sviluppo di un negozio Shopify, puoi seguire i passaggi qui di seguito. Questo ti permetterà di tenere traccia delle modifiche, lavorare in team e gestire versioni del tema del tuo negozio Shopify.

1. Crea un account GitLab o accedi

Vai su gitlab.com e accedi con il tuo account GitLab. Se non hai un account, registrati.

2. Crea un nuovo progetto

Una volta effettuato l'accesso, vai alla tua dashboard e clicca su "New project" in alto a destra.

3. Seleziona "Create blank project"

Nella pagina successiva, scegli l'opzione "Create blank project" (Crea progetto vuoto).

4. Configura il progetto

  • Project name: Inserisci un nome descrittivo per il repository, ad esempio "shopify-theme" o "my-shopify-store".
  • Project slug: Questo verrà generato automaticamente in base al nome del progetto, ma puoi modificarlo se necessario.
  • Project description: Aggiungi una breve descrizione, ad esempio "Repository per il tema del negozio Shopify".
  • Visibility level: Scegli tra pubblico, privato o interno. Se il progetto è privato, scegli Privato.

5. Collega il repository GitLab al tuo computer

Una volta creato il progetto su GitLab, esegui il comando per clonare il repository sul tuo computer:

1git clone https://gitlab.com/tuo-username/nome-del-progetto.git

Sostituisci tuo-username con il tuo nome utente GitLab e nome-del-progetto con il nome del repository.

6. Aggiungi i file del tema Shopify

Se hai scaricato il tema Shopify, estrai il file ZIP sul tuo computer. Sposta i file del tema nella cartella del repository che hai appena clonato.

7. Esegui commit e push dei file

Aggiungi i file al repository:

1git add .

Esegui un commit con un messaggio descrittivo:

1git commit -m "Aggiunto il tema Shopify"

Invia le modifiche al repository remoto su GitLab:

1git push origin master

   

Shopify Access Token

1. Crea un'App Privata o Personalizzata

  • Accedi al pannello di controllo del tuo negozio Shopify.
  • Vai su Apps dal menu laterale.
  • Scorri verso il basso e clicca su Develop apps.
  • Se stai sviluppando un'app nuova, clicca su Create an app.
    • Assegna un nome alla tua app e seleziona un proprietario per l'app (deve essere un amministratore).
    • Clicca su Create app.

2. Configura le API Permissions

  • Una volta creata l'app, vai alla scheda API credentials.
  • Configura le autorizzazioni per l'API che desideri utilizzare.
    • Seleziona le autorizzazioni necessarie come Read o Write su risorse come prodotti, ordini, clienti, ecc.

3. Ottieni il Access Token

  • Dopo aver configurato le autorizzazioni, nella sezione Access tokens, clicca su Install app.
    • Una volta installata, Shopify genererà automaticamente un Admin API access token.
    • Copia l'access token generato e conservalo in un luogo sicuro. Non sarà più visibile una volta chiuso il pannello.

4. Utilizza l'Access Token

  • Ora puoi utilizzare l'access token per autenticarti e interagire con le API di Shopify.
  • Ad esempio, puoi fare una richiesta GET ai prodotti del negozio:
    1curl -X GET "https://{store-name}.myshopify.com/admin/api/2024-08/products.json" \ 2-H "X-Shopify-Access-Token: {access-token}"

 

DEPLOY CI/CD

1. Aggiungi le tue variabili

For motivi di sicurezza, non è consigliabile memorizzare le tue credenziali per il tuo sito Shopify nel file di configurazione. Puoi utilizzare le variabili in GitLab per gestirle.

Usa la CLI di ThemeKit per recuperare tutti gli ID tema disponibili dal tuo negozio Shopify inserendo questo comando nel terminale:

1theme get --list -p=[shopify-api-access-token] -s=[your-store.myshopify.com]

2. Aggiungi un file config.yml al repository del tuo progetto

Questo file potrebbe già esistere, ma config.yml deve contenere quanto segue per mappare correttamente le variabili dal passaggio 1 con il tuo tema Shopify per il deploy:

1development: 2 password: ${SHOPIFY_API_ACCESS_TOKEN} 3 theme_id: ${STAGING_THEME_ID} 4 store: ${SHOP_WEB_ADDRESS} 5 6production: 7 password: ${SHOPIFY_API_ACCESS_TOKEN} 8 theme_id: ${PRODUCTION_THEME_ID} 9 store: ${SHOP_WEB_ADDRESS}

3. Aggiungi un file .gitlab-ci.yml al tuo progetto

Ora configura la tua pipeline per eseguirsi su trigger specifici. Vai alla cartella del tema locale, crea un file .gitlab-ci.yml nella radice del progetto e aggiungi il frammento di codice qui sotto. Questo frammento è la configurazione per la pipeline CI.

1image: python:2 2 3stages: 4 - development 5 - production 6 7development: 8 image: python:2 9 stage: development 10 script: 11 - curl -s https://shopify.github.io/themekit/scripts/install.py | python 12 - theme deploy -e=development 13 only: 14 - dev 15 16production: 17 image: python:2 18 stage: production 19 script: 20 - curl -s https://shopify.github.io/themekit/scripts/install.py | python 21 - theme deploy -e=production --allow-live 22 only: 23 - master

Ha due fasi: development e production. Ciascuna installerà prima il CLI di ThemeKit e poi distribuirà il repository al tema corrispondente.

4. Ora basta pushare alcune modifiche per avviare il deploy

Qualsiasi codice push nel ramo master avvierà il deploy del tema di produzione in Shopify.

1git commit -am "commit message" 2git push

È tutto! Ora stai usando CI per automatizzare i deployment da GitLab ai tuoi temi Shopify.