ShopifyAan de slag met Shopify


Opmerkingen

Deze sectie geeft een overzicht van wat shopify is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen Shopify vermelden en een link naar de gerelateerde onderwerpen bevatten. Omdat de documentatie voor shopify nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.


Geen versies voor Shopify

Shopify geeft geen versienummers uit en verandert geen logboeken vanwege beveiligingsproblemen. Om de wijzigingen in Shopify bij te houden, zijn de beste plaatsen om te controleren:

Installatie of instellingen

Gedetailleerde instructies voor het instellen of installeren van shopify.

Lokale thema-instelling

Er zijn een paar manieren om een lokale kopie van je Shopify-thema in te stellen:

  • Node.js (gulp / grunt)
  • Robijn
  • Thema-app (alleen Mac)

Er zijn misschien een paar andere manieren, maar ik vond de robijnrode manier het gemakkelijkst om mee te werken.

Om lokaal aan de Shopify-themabestanden te werken, hebt u een paar dingen nodig:


Ruby-installatieprogramma

Het eerste is om het Ruby-installatieprogramma te installeren en de nieuwste versie te gebruiken.

Het installatieproces is eenvoudig, maar het zal u vragen om Ruby toe te voegen aan het globale pad van de Windows-omgeving en u moet het selectievakje aanvinken en daar toevoegen , zodat u dit achteraf niet handmatig hoeft te doen.


Ontwikkelingskit

U moet de juiste versie van de DevKit kiezen die hoort bij het Ruby-installatieprogramma dat u hebt toegevoegd.

Het installatieproces is ook eenvoudig.

  1. U pakt het bestand bijvoorbeeld in C: \ DevKit uit
  2. Je cmd in die map en schrijft ruby dk.rb init die een config.yml in de filder zou moeten maken
  3. Als u het bestand config.yml opent, config.yml u onderaan - C:/Ruby23-x64 (afhankelijk van waar u uw Ruby installeert en welke versie is), als dit niet het geval is, moet u het handmatig toevoegen
  4. Daarna voer je in dezelfde map de volgende ruby dk.rb install
  5. Als alles in orde is, zou je de volgende opdracht moeten kunnen uitvoeren - gem install json --platform=ruby dat zal bevestigen dat je Ruby-installatie werkt

Meer gedetailleerde instructies zijn hier ook te zien: https://github.com/oneclick/rubyinstaller/wiki/Development-Kit


SSL-certificaat

U moet het bestand cacert.pem toevoegen aan de globale variabelen van uw venster.

  1. U moet het volgende bestand downloaden: https://curl.haxx.se/ca/cacert.pem (sla het op als .pem en niet als .pem.txt)
  2. U moet het scherm Omgevingsvariabelen invoeren en onder Systeemvariabelen op Nieuw klikken
  3. Voor de naam van de variabele voert u SSL_CERT_FILE in en voor de variabele waarde voert u het pad naar het bestand in, bijvoorbeeld C: \ RailsInstaller \ cacert.pem .

Shopify-thema Gem

Open je cmd en voer de volgende code in: gem install shopify_theme

Dit zou het Shopify-thema-juweel moeten installeren dat we nodig hebben.


Als je alle bovenstaande stappen eenmaal hebt doorlopen, zul je ze niet meer doen.

Nu komen die stappen die u moet doen telkens wanneer u een nieuw Shopify-project start:

  • Maak een privé-app (vanuit de Shopify Store)
  • Maak een configuratiebestand met behulp van de privé-app-informatie

Maak een privé-app

U moet inloggen op uw Shopify-winkelbeheerpaneel en naar het app-scherm gaan -> privé-app:

https://YOUR-STORE-NAME.myshopify.com/admin/apps/private

En klik op de knop Private app maken .

U wordt om een titel gevraagd. (voer in wat je maar wilt)

Het belangrijke onderdeel is het wijzigen van alle machtigingen voor Lezen en schrijven

Nadat u de machtigingen hebt gewijzigd en de app hebt opgeslagen, wordt u doorgestuurd naar een pagina waar u de API-sleutel en het wachtwoord voor deze app krijgt. (die heb je nodig voor het configuratiebestand dat we hieronder maken)


Maak een configuratiebestand

Ga naar een lokale map waarin u de themabestanden wilt opslaan en cmd erin.

Schrijf het volgende commando:

theme configure API-KEY PASSWORD DOMAIN ID

Waar:

  • API-sleutel - is afkomstig van de privé-app die we hebben gemaakt
  • Wachtwoord - is afkomstig van de privé-app die we hebben gemaakt
  • Domein - dit is uw domein YOUR-STORE-NAME.myshopify.com , zonder https: // ervoor
  • ID - dit is de thema-ID, als je aan het live-thema gaat werken, kun je dit overslaan, maar als je aan een gekloonde hen werkt, moet je hier de thema-ID invoeren

Nadat u de bovenstaande code hebt uitgevoerd, zou deze een bestand met de naam config.yml moeten maken, waarin alle verstrekte informatie aanwezig is.

Nu moet je cmd (in het geval dat je de console hebt gesloten) in de map waar config.yml staat en je schrijft de volgende code: theme download die zou moeten beginnen met het één voor één downloaden van de bestanden.

Nadat u het downloadproces hebt voltooid, schrijft u een theme watch en elke keer dat u de gedownloade bestanden wijzigt, worden de bestanden in de Shopify-winkel ook na 1-2 seconden bijgewerkt. Dit is waar als u ook bestanden toevoegt, maar niet wanneer u bestanden verwijdert.

Meer gedetailleerde informatie over de Gem is hier te vinden: https://github.com/Shopify/shopify_theme

Shopify lokale ontwikkeling met Theme Kit

Shopify-thema's kunnen ook lokaal worden ontwikkeld. Volg de onderstaande stappen om de lokale ontwikkelomgeving in te stellen:

  • Installeer Shopify Theme Kit
  • Krijg API-toegang
  • Gebruik een nieuw thema of configureer een bestaand thema met themakit

De uitleg van de bovenstaande stappen is als volgt:


Installeer Shopify Theme Kit


Automatische installatie

Als u een Mac of Linux gebruikt, kunt u het volgende installatiescript gebruiken om Theme Kit automatisch voor u te downloaden en te installeren.

curl -s https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | sudo python
 

homebrew

Als Homebrew is geïnstalleerd, kunt u Theme Kit installeren door de volgende opdrachten uit te voeren.

brew tap shopify/shopify
brew install themekit
 

Windows installatie


Automatische Powershell-installatie

Voer de volgende opdrachten in Powershell uit als beheerder.

(New-Object System.Net.WebClient).DownloadString("https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install.ps1") | powershell -command -
 

Handleiding

  • Maak een map in C: \ Program Files \ genaamd Theme Kit
  • Download themekit (hieronder) en kopieer het uitgepakte programma naar C: \ Program Files \ Theme Kit
  • Navigeer naar Configuratiescherm> Systeem en beveiliging> Systeem. Een andere manier om daar te komen is door met de rechtermuisknop op mijn computer te klikken en het eigenschappenitem te kiezen
  • Zoek naar de knop of koppeling met de naam Omgevingsvariabelen
  • Zoek in het tweede paneel naar het item Pad en dubbelklik erop. Dit zou een venster moeten openen met een tekstveld dat vol zit met inhoud.
  • Verplaats uw cursor helemaal naar het einde en voeg het volgende toe:; C: \ Program Files \ Theme Kit \
  • Klik op OK totdat alle vensters zijn verdwenen.
  • Om te controleren of Theme Kit is geïnstalleerd, opent u cmd.exe en typt u thema.

Handmatige installatie

Download het nieuwste uitvoerbare bestand.

OS architectuur Koppeling
MacOS 64-bits Download
ramen 64-bits Download
ramen 32-bits Download
Linux 64-bits Download
Linux 32-bits Download

Krijg API-toegang


U moet een API-sleutel instellen om aan onze configuratie toe te voegen en een verbinding tussen uw winkel en Theme Kit te maken. Met de API-sleutel kan Theme Kit praten met en toegang krijgen tot uw winkel, evenals de themabestanden.

Log hiervoor in bij de Shopify-winkel en maak een privé-app. Ga in de Shopify-beheerder naar Apps en klik op Privé-apps bekijken. Klik vervolgens op API-referenties genereren om uw privé-app te maken. Zorg ervoor dat u de machtigingen voor themasjablonen en thema-items instelt om lees- en schrijftoegang te hebben om de juiste API-referenties te genereren en klik vervolgens op Opslaan.

voer hier de afbeeldingsbeschrijving in

Vul de informatie bovenaan in en stel de machtigingen van Themasjablonen en thema-items in om te lezen en schrijven. Druk op Opslaan en het volgende scherm verschijnt. Hierin ziet u uw toegangsgegevens. Noteer het wachtwoord. Je hebt het later nodig.

voer hier de afbeeldingsbeschrijving in


Gebruik een nieuw thema.

Als u helemaal opnieuw begint en snel wilt beginnen, voert u de volgende stappen uit:

theme bootstrap --password=[your-password] --store=[your-store.myshopify.com]
 

Hiermee wordt een nieuw thema voor uw online winkel gemaakt op basis van de houtsjabloon . Vervolgens downloadt het al die middelen van Shopify en maakt automatisch een config.yml-bestand voor u aan.


Configureer een bestaand thema.

Om een bestaand thema te verbinden, hebt u het ID-nummer van het thema nodig. De eenvoudigste manier om het ID-nummer van uw thema te krijgen, is door naar de Thema-editor te gaan en op HTML / CSS bewerken te klikken en het thema-ID-nummer van de URL te kopiëren - het zijn de laatste cijfers na mystore.myshopify.com/admin/themes/. voer hier de afbeeldingsbeschrijving in

Nadat u uw thema-ID hebt genoteerd, voert u de volgende opdrachten uit:

# create configuration
theme configure --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]
# download and setup project in the current directory
theme download