یک چارچوب شبکه CSS برای صفحات مجموعه Shopify – مجله Smashing

درباره نویسنده

لیام مدیر جامعه توسعه دهنده در Shopify ، مستقر در ایرلند است و در زمینه توسعه جلویی ، مایع سازی و کار با موضوعات تخصص دارد. او پرشور است …
بیشتر در مورد
لیام
…

CSS Grid به روشی فزاینده و محبوب برای اعمال طرح بندی در صفحات در میان سایر چارچوب های CSS تبدیل شده است. توسعه دهندگان می توانند از این سیستم برای کاهش پیچیدگی و تعریف قوانین سبک روشن استفاده کنند. همانطور که در پست وبلاگ Shopify من در توضیح داده شده است شروع به کار با یک شبکه CSS طرح ، یک چارچوب شبکه CSS می تواند به راحتی در تم های Shopify پیاده سازی شود تا طرح بندی صفحه های پاسخگو بر اساس سطرها و ستون ها طراحی شود.

تمام صفحات یک فروشگاه آنلاین Shopify می توانند از CSS Grid استفاده کنند ، اما یکی از نقاط حساس هر سایت تجارت الکترونیکی که می تواند از طرح شبکه قوی و تمیز بهره مند شود ، صفحه مجموعه است. در صفحات مجموعه ، طبیعی است که محصولات به صورت شبکه و با ردیف و ستون سازماندهی می شوند. بنابراین ، اگر گزینه ای برای ایجاد یک آرایش شبکه قوی با مجموعه ای ساده از قوانین امکان پذیر باشد ، ارزش بررسی پروژه های تم سفارشی خود را دارد.

توجه داشته باشید: برای دریافت ایده در مورد چگونگی جستجوی مشتری شما و بنابراین می توانید این آموزش شبکه CSS را دنبال کنید ، من یک فروشگاه تست راه اندازی کرده ام که می توانید برای دیدن روشی که در این مقاله آموزش داده ام استفاده کنید.

ایجاد یک چیدمان صفحه اصلی مجموعه

کار با CSS Grid در صفحه مجموعه Shopify تقریباً به همان روشی که Grid در یک بخش سفارشی کار می کند عمل خواهد کرد – چیزی که ما در شبکه CSS مقاله وبلاگ. خوشبختانه ، Shopify از پشتیبانی شبکه CSS عالی برخوردار است. بزرگترین تفاوت هنگام اجرای سیستم شبکه در صفحه مجموعه این است که نیازی به اختصاص کلاس به هر مورد خاص ندارید. توجه داشته باشید که اگر با CSS خیلی پیشرفته نیستید ، توصیه می کنیم مطالب ما را مطالعه کنید معرفی CSS قبل از ادامه کار راهنمایی کنید.

اکنون ، از آنجا که محصولات بصورت خودکار در یک حلقه به عنوان موارد محتوای قابل تکرار تولید می شوند ، می توان کلاس یکسانی را برای کلیه محصولات مرتبط با مجموعه اعمال کرد. اما در ابتدا ، بیایید نمونه ای از یک صفحه مجموعه را بدون یک ظاهر طراحی کنیم.

اگر با راه اندازی صفحه اصلی مجموعه شروع کنید ، به احتمال زیاد علامت گذاری مانند موارد زیر را دارید:

<h1>{{ collection.title }}</h1>
  {% for product in collection.products %}
    <a href="https://smashingmagazine.com/2020/09/css-grid-framework-shopify-collection-pages/{{ product.url" within: collection }}">
      <img src="{{ product.featured_image.src | img_url: '300x' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
    <a href="https://smashingmagazine.com/2020/09/css-grid-framework-shopify-collection-pages/{{ product.url" within: collection }}">{{ product.title }}</a>
      <p>{{ product.price | money }}</p>
  {% unless product.available %}<br><strong>sold out</strong>{% endunless %}
  {% endfor %}

با این کار نام مجموعه به عنوان سرصفحه نمایش داده می شود و محصولات مرتبط مجموعه با تصویر ، نام و قیمت آنها نمایش داده می شود. بدون هیچ گونه سبک ، این محصولات به طور پیش فرض در یک ردیف عمودی ظاهر می شوند. اندازه تصاویر محصول 300 پیکسل خواهد بود ، همانطور که توسط img_url فیلتر کردن

برای اعمال یک چارچوب شبکه CSS برای این گروه از محصولات ، ابتدا می خواهید مجموعه را جمع کنید for loop در یک محفظه اصلی شبکه که ظرف اصلی در نظر گرفته شده است. در مرحله بعد ، می توانید کد مربوط به هر محصول (کودکان) را در ظرف اختصاصی خود قرار دهید.

پس از افزودن این ظروف ، علامت گذاری به صورت زیر ظاهر می شود:

<h1>{{ collection.title }}</h1>
  <div class="grid-collection">
    {% for product in collection.products %}
      <div class="grid-product">
        <a href="https://smashingmagazine.com/2020/09/css-grid-framework-shopify-collection-pages/{{ product.url }}">
          <img src="{{ product.featured_image.src | img_url: '300x' }}" alt="{{ product.featured_image.alt | escape }}">
        </a>
        <a href="https://smashingmagazine.com/2020/09/css-grid-framework-shopify-collection-pages/{{ product.url }}">{{ product.title }}</a>
          <p>{{ product.price | money }}</p>
          {% unless product.available %}<br><strong>sold out</strong>{% endunless %}
      </div>
    {% endfor %}
  </div>

استفاده از یک ظاهر طراحی چارچوب شبکه CSS در صفحه مجموعه

اکنون که یک صفحه مجموعه اصلی با سلسله مراتب ظروف داریم ، می توانید محصولات را به یک قسمت تقسیم کنید طرح شبکه با استفاده از سبک ها در کلاس هایی که ایجاد کرده اید. در فایل صفحه تم ها ، می توانید موارد زیر را اضافه کنید:

.grid-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-product {
  display: grid;
}

اکنون ، وقتی به صفحه مجموعه بروید ، باید محصولات ظاهر شده در یک شبکه را ببینید که در فضای موجود روی صفحه قرار دارند.

همینطور اضافه کردن display: grid، متوجه خواهید شد که ما از grid-template-columns ویژگی ، که می تواند برای تعیین تعداد ستون های موجود در شبکه استفاده شود. به جای تعریف یک مقدار ثابت ، می توانیم از علامت تکراری برای ایجاد قانونی استفاده کنیم که محصولات ما باید هر چند بار که در داخل شبکه قرار بگیرند ظاهر شوند.

در قالب عملکرد ، auto-fit تا آنجا که ممکن است موارد موجود در خط را نشان می دهد ، بنابراین در یک صفحه کامل ، به همان اندازه فضای موجود در صفحه خریداران مشاهده خواهیم کرد. سرانجام ، با minmax، ما یک قانون تنظیم کردیم که هر سلول باید حداقل 300 پیکسل و حداکثر یک بخش از محفظه شبکه باشد.

هنگام استفاده از این ویژگی ، باید اطمینان حاصل کنیم که اندازه تعریف شده در minmax تابع مطابقت دارد ، یا بزرگتر از اندازه تعریف شده توسط است img_url فیلتر مایع در نشانه گذاری ما. اگر minmax تابع دارای اندازه پیکسل کوچکتر است ، خواهید دید که تصاویر محصول قطع می شوند زیرا فضای کافی در سلول تعریف شده ندارند.

هنگامی که شبکه اصلی ما مطابق انتظار ظاهر شد ، می توانیم CSS اضافی اضافه کنیم تا با افزودن فضای حاشیه و قرار دادن محصولات در مرکز صفحه ، طرح را مرتب کنیم. اگر می خواهید فاصله بین ستون ها و ردیف های شما یکسان باشد ، می توانید هر دو را با تعریف کنید gap خاصیت ، به جای تعریف هر یک به طور جداگانه.

پس از تنظیم همه موارد ، صفحه سبک شما به این شکل خواهد بود:

.grid-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  margin: 1em;
  background-color: white;
}

.grid-product {
  display: grid;
  justify-content: center;
  padding: 10px;
  color: white;
  line-height: 1;
  border-radius: 5px;
}

اگرچه این یک مثال ساده از چگونگی اعمال یک فریم ورک CSS Grid در یک صفحه مجموعه است ، من توصیه می کنم پارامترهای مختلفی را متناسب با تصاویر مشتری و تصاویر موجود در برند خود آزمایش کنید. همچنین می توانید از این روش برای ایجاد شبکه در صفحات دیگر مانند سبد خرید استفاده کرده و بر اساس ویژگی های منحصر به فرد آن تنظیم کنید.

افزودن گزینه های قابل تنظیم در شبکه

روش فوق برای شبکه ای که ستون های محصولات را بر اساس اندازه صفحه نمایش نشان می دهد ، به خوبی کار می کند. اما ، اگر بخواهید تاجر را در نحوه نمایش شبکه کنترل کنید ، چه می کنید؟

در بعضی موارد ممکن است مشتریان شما بخواهند صفحه محصول را سفارشی کنند و تعداد محصولات ظاهر شده را تعیین کنند.

اگر نشانه گذاری شما در یک فایل بخش وجود دارد ، می توانید تنظیمات بخشی را ایجاد کنید که به مشتریان امکان می دهد شبکه را از ویرایشگر فروشگاه آنلاین سفارشی کنند. پیکربندی تنظیماتی که به مشتری شما اجازه می دهد تعدادی از محصولات را در یک ردیف انتخاب کند ، می تواند به صورت زیر باشد:

{% schema %}

{
    "name": "Collection",
    "settings": [
  {
    "type": "select",
    "id":  "product_number",
    "label": "Number of products per row",
    "options": [
        {
        "value": "two",
        "label": "two"
        },
        {
        "value": "three",
        "label": "three"
        },
        {
        "value": "four",
        "label": "four"
        }
      ]
    }
  ]
}

{% endschema %}

در اینجا می توانید ببینید که تنظیمات دارای نوعی از select که یک گزینه کشویی روی ویرایشگر فروشگاه آنلاین ایجاد می کند. همچنین وجود دارد label ویژگی برای توصیف تنظیمات.

id ویژگی در ویرایشگر قابل مشاهده نخواهد بود ، اما می توانیم برای ایجاد یک متغیر به این مرجع مراجعه کنیم. یک مورد معمول برای متغیرهای ایجاد شده با اشیا section بخش ، ارجاع دادن آنها به داخل علامت گذاری برای تغییر نام کلاس بر اساس تنظیمات انتخاب شده است.

برای دستیابی به این اثر ، می توانیم از Liquid برای خروجی استفاده کنیم value که در ویرایشگر فروشگاه آنلاین انتخاب می شود ، به عنوان ویژگی شی بخش. این شی به صورت {{ section.settings.product_number }}، و هر مقداری که انتخاب شود خروجی خواهد گرفت.

یکی از راه های بررسی آن این است که id ما در تنظیمات بخش اختصاص داده شده به یک “مکان نگهدارنده” برای مقدار موجود در گزینه انتخاب شده تبدیل می شود.

سپس ، می توانیم این شی object را گرفته و به نام کلاس مجموعه اضافه کنیم. این اجازه می دهد تا نام کلاس بر اساس گزینه انتخاب شده تغییر کند ، و شما می توانید قوانین مختلف CSS را برای هر نام کلاس ایجاد کنید.

وقتی متغیر را به نام کلاس مجموعه موجود اضافه کنیم ، به این صورت خواهد بود:

<div class="grid-collection-{{ section.settings.product_number }}">

در اینجا می توانید مشاهده کنید که شی section بخش به id از تنظیمات بخش مقداری که توسط این قسمت بخش تولید می شود با مقداری که در ویرایشگر فروشگاه آنلاین انتخاب شده تعیین می شود. به عنوان مثال ، اگر “سه” در کادر کشویی ما انتخاب شود ، این امر باعث می شود که علامت گذاری به صورت زیر انجام شود:

<div class="grid-collection-three">

اکنون می توانیم به صفحه سبک خود برگردیم و قوانین مختلف CSS را برای آن تنظیم کنیم grid-collection-two، grid-collection-three، و grid-collection-four. این موارد به نظر می رسد:

.grid-collection-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 1em;
  background-color: white;
}

.grid-collection-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 1em;
  background-color: white;
}

.grid-collection-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 1em;
  background-color: white;
}

grid-template-columns ویژگی تعیین می کند که چند ستون در شبکه ظاهر شود و در نتیجه ، چند محصول در یک ردیف در صفحه مجموعه ظاهر می شود. بنابراین ، هر کلاس مقدار متفاوتی برای کلاس خواهد داشت grid-template-columns خاصیت ، که با نام کلاس منحصر به فرد آن مطابقت دارد.

اکنون وقتی مشتری به ویرایشگر فروشگاه آنلاین می رود و گزینه ای را برای “تعداد محصولات در هر ردیف” انتخاب می کند ، شبکه تنظیم می شود تا این مورد را منعکس کند:

در آخر ، می توانیم پرس و جوهای رسانه را اضافه کنیم تا قوانین مختلف CSS Grid برای صفحه های کوچکتر وجود داشته باشد. این باعث می شود شبکه با تعداد زیادی ستون از محصولات در دستگاه های کوچکتر ظاهر نشود ، که باعث می شود محصولات از صفحه خارج شوند.

هر گونه تغییر collection-grid به کلاس می توان قوانین مختلفی اختصاص داد که در آن شبکه به دو یا یک ستون سقوط می کند. وقتی این مورد در صفحه سبک شما تنظیم می شود ، می تواند به صورت زیر باشد:

@media screen and (max-width: 992px) {
  .grid-collection-two {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .grid-collection-two {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .grid-collection-three {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .grid-collection-three {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 992px) {
  .grid-collection-four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .grid-collection-four {
    grid-template-columns: repeat(1, 1fr);
  }
}

این احتمال وجود دارد که باید اندازه و اندازه پیکسل را برای آن تنظیم کنید img_url براساس نیازهای خاص مشتری و تصاویری که از آنها استفاده می کند فیلتر کنید. با این حال ، این روش به شما نشان می دهد که چگونه می توانید با استفاده از یک سیستم CSS Grid برای صفحات مجموعه در زمینه ایجاد تم های سفارشی خود شروع کنید.

گسترش شبکه

هنگامی که یک CSS Grid را در صفحات مجموعه خود اعمال کردید ، می توانید سایر مناطق را در موضوعات Shopify در نظر بگیرید که در آن قوی هستند طرح بندی وب سایت ممکن است اعمال شود به عنوان مثال ، می توان بخش های گالری تصویر را در یک شبکه ایجاد کرد و سلول های دارای شکل نامنظم را برای تنوع اضافه کرد.

در هنگام استفاده از CSS Grid در Shopify ، یک سری فرصت ها وجود دارد و هر یک به طور بالقوه ارزش بیشتری به پروژه های موضوعی شما می بخشد. با کمک این مقاله می توانید چارچوب CSS Grid را به تمام پروژه های موضوعی خود گسترش دهید.

(ریل)