Migrate product data from Kirby to Shopify Storefront API
- Add product loaders (product-loader.js, products-list-loader.js) to fetch data from Shopify - Extend Shopify API client with getProductByHandle() and getAllProducts() methods - Integrate Shopify metafields for multilingual support (custom.title_en, custom.description_en) - Refactor product.php and home.php templates to load content dynamically - Simplify product blueprint to minimal routing configuration - Create generic buy-button.php snippet with variant selection - Update footer.php with conditional script loading - Refactor _section--product.scss for better Sass structure - Add translations for loading states and product errors - Clean up old Kirby product content files Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
957cf79e45
commit
ad699f0365
22 changed files with 649 additions and 579 deletions
|
|
@ -1,35 +1,24 @@
|
|||
<?php snippet('header', ['title' => $site->title(), 'template' => 'store']) ?>
|
||||
|
||||
<main>
|
||||
<p class="p__baseline-big">
|
||||
<?= $page->baseline()->or('Bienvenue sur la boutique de soutien à Index') ?>
|
||||
</p>
|
||||
<main>
|
||||
<p class="p__baseline-big">
|
||||
<?= $page->baseline()->or('Bienvenue sur la boutique de soutien à Index') ?>
|
||||
</p>
|
||||
|
||||
<section id="store__container">
|
||||
<?php foreach($site->children()->listed() as $product): ?>
|
||||
<article class="store__product">
|
||||
<figure>
|
||||
<?php if($cover = $product->files()->sortBy('sort', 'asc')->first()): ?>
|
||||
<?php snippet('picture', [
|
||||
'file' => $cover,
|
||||
'alt' => $product->title()->html(),
|
||||
'preset' => 'product-card',
|
||||
'size' => 25,
|
||||
'lazy' => true
|
||||
]) ?>
|
||||
<?php endif ?>
|
||||
</figure>
|
||||
<p class="line-1"><a href="<?= $product->url() ?>"><?= $product->title()->html() ?></a></p>
|
||||
<p class="price"><?= $product->price() ?>€</p>
|
||||
<a href="<?= $product->url() ?>" class="link-block" aria-hidden="true"></a>
|
||||
</article>
|
||||
<?php endforeach ?>
|
||||
</section>
|
||||
<section id="store__container"
|
||||
data-products-loader
|
||||
data-language="<?= strtoupper($kirby->language()->code()) ?>">
|
||||
|
||||
<p class="p__baseline-big">
|
||||
<?= t('supportText', 'Pour nous soutenir, vous pouvez aussi') ?>
|
||||
<a href="https://soutenir.index.ngo" class="link-don"><?= t('makeDonation', 'faire un don') ?></a>
|
||||
</p>
|
||||
</main>
|
||||
<div class="products-loading">
|
||||
<p><?= t('loading') ?></p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<p class="p__baseline-big">
|
||||
<?= t('supportText') ?>
|
||||
<a href="https://soutenir.index.ngo" class="link-don"><?= t('makeDonation') ?></a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<?php snippet('footer') ?>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,47 @@
|
|||
<?php snippet('header', ['title' => $page->title(), 'template' => 'shop']) ?>
|
||||
<?php
|
||||
$shopifyHandle = $page->shopifyHandle()->or($page->slug());
|
||||
|
||||
<main>
|
||||
<nav class="store__nav">
|
||||
<a href="<?= $site->homePage()->url() ?>"><?= t('backToShop', 'Retour à la boutique') ?></a>
|
||||
</nav>
|
||||
snippet('header', ['title' => $page->title(), 'template' => 'shop']);
|
||||
?>
|
||||
|
||||
<section class="section__product">
|
||||
<main>
|
||||
<nav class="store__nav">
|
||||
<a href="<?= $site->homePage()->url() ?>"><?= t('backToShop') ?></a>
|
||||
</nav>
|
||||
|
||||
<section class="section__product"
|
||||
data-product-loader
|
||||
data-shopify-handle="<?= $shopifyHandle ?>"
|
||||
data-language="<?= $kirby->language()->code() ?>">
|
||||
|
||||
<div class="product-loading">
|
||||
<p><?= t('loading') ?></p>
|
||||
</div>
|
||||
|
||||
<div class="product-content" style="display: none;">
|
||||
<div class="col-left">
|
||||
<div class="hero">
|
||||
<h2 class="p__baseline-big"><?= $page->title()->html() ?></h2>
|
||||
<p class="p__baseline-big"><?= $page->price() ?>€</p>
|
||||
<h2 class="p__baseline-big" data-product-title></h2>
|
||||
<p class="p__baseline-big" data-product-price></p>
|
||||
</div>
|
||||
|
||||
<div class="details">
|
||||
<?php if($page->details()->isNotEmpty()): ?>
|
||||
<?= $page->details()->kt() ?>
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<div class="details" data-product-details></div>
|
||||
|
||||
<?php snippet('buy-button--t-shirt') ?>
|
||||
<?php snippet('buy-button') ?>
|
||||
</div>
|
||||
|
||||
<div class="product-gallery swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<?php
|
||||
if ($page->hasFiles()):
|
||||
foreach($page->files()->sortBy('sort', 'asc') as $image):
|
||||
?>
|
||||
<div class="swiper-slide">
|
||||
<figure>
|
||||
<?php snippet('picture', [
|
||||
'file' => $image,
|
||||
'alt' => $page->title()->html(),
|
||||
'preset' => 'product-detail',
|
||||
'size' => 50,
|
||||
'lazy' => false
|
||||
]) ?>
|
||||
</figure>
|
||||
</div>
|
||||
<?php
|
||||
endforeach;
|
||||
endif;
|
||||
?>
|
||||
</div>
|
||||
|
||||
<!-- Navigation arrows -->
|
||||
<div class="swiper-wrapper" data-product-images></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
|
||||
<!-- Pagination dots -->
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<?php snippet('footer', ['scripts' => [
|
||||
'assets/js/product-add-to-cart.js',
|
||||
'assets/js/product-gallery.js'
|
||||
]]) ?>
|
||||
<div class="product-error" style="display: none;">
|
||||
<p><?= t('productNotFound') ?></p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<?php snippet('footer', ['scripts' => ['product']]) ?>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue