وبلاگ اشتراک خود را با Shopify ایجاد کنید

در این مقاله ، نحوه ایجاد یک وبلاگ paywalled با Shopify با استفاده از HTML ، CSS و Liquid (زبان قالب Shopify) را نشان خواهم داد. اگرچه ویژگی های وبلاگ نویسی Shopify تا حدودی اساسی است و خدمات آنلاین دیگری نیز وجود دارد که به طور خاص به وبلاگ نویسان کمک می کند تا وبلاگ هایی را راه اندازی کنند که خوانندگان بتوانند با پرداخت هزینه از آنها مشترک شوند (مانند Ghost) ، من توضیح خواهم داد که چرا ترجیح می دهید از Shopify استفاده کنید.

متعجب؟ برای محتوا Shopify کنید؟ چرا؟

Shopify مسلماً پیشرو در فضای تجارت الکترونیک است. دارای بیشترین مشتری و بیشترین تعداد (به خوبی اجرا شده) خارج از جعبه است امکانات در مقایسه با رقبای خود

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

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

بیایید Shopify را با آن مقایسه کنیم روحبه عنوان مثال ، از آنجا که Ghost امروزه سریعترین رشد CMS وبلاگ نویسی است.

Shopify Basic و Ghost Pro Basic هر دو 29 دلار در ماه هستند. با این حال ، Shopify می تواند هر چیزی را بفروشد ، در حالی که Ghost فقط می تواند دسترسی به آن را بفروشد اشتراک، ابونمان-محتوا بر اساس شبح نمی تواند دسترسی به محتوا را با هزینه ای یکبار یا هر چیز دیگری در کنار آن بفروشد. در مورد انعطاف پذیری مدل کسب و کار ، Shopify دست کم می گیرد.

صادقانه بگویم ، تنها نکته احتمالی این است که ویژگی های وبلاگ نویسی ضعیف Shopify محسوب می شود ، اما اگر از ساختن موضوعات از ابتدا لذت می برید (که به صراحت همراه است زیاد مزایا) ، سپس از این که زبان قالب Liquid Shopify چقدر قدرتمند و انعطاف پذیر است تعجب می کنید. من Shopify را یک تجارت الکترونیکی نمی دانم سکو، بلکه CMS با ریشه در تجارت الکترونیک است.

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

پیش نیازها

شما باید در توسعه وب ، حداقل HTML و CSS مهارت کافی داشته باشید. برخی از دانش زبان قالب Liquid که Shopify از آن استفاده می کند مطمئناً مفید خواهد بود ، اما لازم نیست ، زیرا یادگیری Liquid تا حدی آسان است. (توصیه می کنم که برنامه را بررسی کنید مستندات مایع بدون در نظر گرفتن.)

شما همچنین نیاز خواهید داشت یک حساب Shopify ایجاد کنید، که به مدت 14 روز رایگان است (بدون نیاز به کارت). لطفاً توجه داشته باشید که مگر اینکه طرح پرداختی را انتخاب کنید ، نمی توانید محافظت از رمز عبور را در فروشگاه خود حذف کنید.

مرحله 1: ساختار تم را تعریف کنید

ابتدا ، اجازه دهید ساختار فایل موضوع را با استفاده از مخلوطی از فایل های مورد نیاز و رایج تعریف کنیم. ما در این آموزش از همه آنها استفاده نخواهیم کرد ، اما می توانید از این ساختار برای راه اندازی هرگونه فروشگاه Shopify استخوانی در آینده استفاده کنید. فایلها ممکن است فعلا خالی باشند:

.
├── assets
├── config
│   ├── settings_data.json
│   └── settings_schema.json
├── layout
│   └── theme.liquid
├── sections
├── snippets
└── templates
    ├── 404.liquid
    ├── article.liquid
    ├── blog.liquid
    ├── cart.liquid
    ├── collection.liquid
    ├── customers
    │   ├── account.liquid
    │   ├── activate_account.liquid
    │   ├── addresses.liquid
    │   ├── login.liquid
    │   ├── order.liquid
    │   ├── register.liquid
    │   └── reset_password.liquid
    ├── gift_card.liquid
    ├── index.liquid
    ├── list-collections.liquid
    ├── page.liquid
    ├── password.liquid
    ├── product.liquid
    └── search.liquid

اگر macOS یا Linux را دنبال می کنید ، می توانید از دستورات زیر برای ایجاد ساختار استفاده کنید:

mkdir -p assets snippets sections config layout templates/customers
touch config/settings_data.json config/settings_schema.json
touch layout/theme.liquid
cd templates/customers
touch account.liquid activate_account.liquid addresses.liquid login.liquid order.liquid register.liquid reset_password.liquid
cd ..
touch 404.liquid article.liquid blog.liquid cart.liquid collection.liquid gift_card.liquid index.liquid list-collections.liquid page.liquid password.liquid product.liquid  search.liquid


cd ..

خواندن بیشتر:

مرحله 2: شناسه تم را بدست آورید

در مرحله بعد ، ما باید شناسه تم موضوع پیش فرض (“Debut”) را که باید قبلاً نصب شده باشد ، بدست آوریم. در سرپرست Shopify ، به مسیر بروید فروشگاه آنلاین > تم ها > اقدامات > ویرایش کد و سپس شناسه تم عددی را در URL یادداشت کنید. اگر قبلاً تم تنظیم کرده اید ، استفاده کنید که در عوض شناسه تم

توجه: در حالی که موضوع پیش فرض-“Debut”-یک موضوع رمزگذاری شده با عملکرد کامل است ، ما آن را با کد خود رونویسی می کنیم.

مرحله 3: مجموعه تم را تنظیم کنید

کیت تم یک ابزار خط فرمان برای ایجاد و مدیریت تم های Shopify است. در این آموزش ، ما از Theme Kit برای مشاهده تغییرات کد در فهرست موضوعی خود و اعمال آن تغییرات در موضوع خود استفاده خواهیم کرد.

Theme Kit روی Windows ، macOS و Linux کار می کند و با ابزارهای گردش کار مانند Git و Node.js. برای ساده نگه داشتن همه چیز ، ما ابزارهای گردش کار را حذف کرده و فقط از Theme Kit استفاده می کنیم.

کیت تم را نصب کنید

ابتدا ، Theme Kit را با استفاده از خط فرمان نصب کنید.

پنجره و شکلات

choco install themekit

macOS و Homebrew

brew tap shopify/shopify
brew install themekit

لینوکس

curl -s https://shopify.dev/themekit.py | sudo python

“برنامه” Shopify ایجاد کنید

در مرحله بعد ، یک “برنامه” Shopify ایجاد کنید تا اعتبارهای لازم را که Theme Kit برای احراز هویت تغییرات تم نیاز دارد ، بدست آورید.

در سرپرست Shopify ، به مسیر بروید برنامه ها > مدیریت برنامه های خصوصی، سپس سه کادر تأیید را علامت بزنید تا شرایط و ضوابط را بپذیرید. بعدی را انتخاب کنید توسعه برنامه خصوصی را فعال کنید > ایجاد برنامه خصوصی و فرم را تکمیل کنید

در این مرحله ، باید یک نام به برنامه خصوصی خود بدهید و یک ایمیل توسعه دهنده اضطراری وارد کنید. شما همچنین باید دسترسی “خواندن و نوشتن” را برای “تم” قبل از کلیک بر روی “” فعال کنید صرفه جویی دکمه. این نقطه نهایی در پشت a پنهان شده است نمایش مجوزهای API سرپرست غیر فعال کشویی

در نهایت ، کلیک کنید ایجاد برنامه و “رمز عبور” را در صفحه بعدی یادداشت کنید.

مراقب تغییرات کد باشید

با نصب Theme Kit و شناسه تم و رمز عبور ما آماده ، باید برنامه را اجرا کنیم watch دستور از خط فرمان

اولین، سی دی به فهرست پوشه شما

در مرحله بعد ، دستورات زیر را اجرا کنید تا موضوع در مرورگر شما باز شود و تغییرات کد را مشاهده کنید. تعویض را به خاطر بسپارید xxx باشما myshopify آدرس اینترنتی (منهای https://) ، <password> با رمز عبور خود ، و <theme-id> با شناسه تم Shopify خود:

theme open -s xxx.myshopify.com -p <password> -t <theme-id> --hidepb
theme watch -s xxx.myshopify.com -p <password> -t <theme-id> --allow-live

به پرچم های اضافی توجه کنید:

• --hidepb: مزاحم را پنهان می کند نوار پیش نمایش
• --allow-live: برخی اصطکاک های قابل درک برای اطلاع از اینکه شما در حال ویرایش موضوع زنده هستید (در صورت عدم اطلاع!)

پیشنهاد می کنم دنباله فرمان بالا را به عنوان یک اجرا کنید آلفرد گردش کار (یا مشابه) برای راحتی. در حالی که شما می توان اعتبارنامه تم را در a ذخیره کنید config.yml فایل ، من خطر افشای تصادفی آنها را ندارم – به عنوان مثال ، از طریق GitHub (که یک نقص امنیتی خواهد بود).

و با انجام این کار ، بیایید به سمت کد چیزها برویم.

مرحله 4: ایجاد Theme Wrapper (theme.liquid)

ما با شروع می کنیم theme.liquid فایل ، زیرا نه تنها نیازهای خاصی دارد ، بلکه یکی از مهمترین فایلها در موضوع Shopify است. به زبان ساده ، این فایل بسته بندی تم است: هر چیزی که در آن مشخص شده است theme.liquid ظاهر می شود در هر صفحهبه شما می خواهید نشانه گذاری را به این شکل شروع کنید:

<!doctype html>
<html>
  <head>
    <!-- head markup -->
    {{ content_for_header }}
  </head>
  <body>
    <!-- header markup -->
    {{ content_for_layout }}
    <!-- footer markup -->
  </body>
</html>

به احتمال زیاد از کد بالا متوجه شده اید که برای خروجی چیزی با Liquid باید از براکت های دو فرفری استفاده کنید ({{ }}) با توجه به این نکته ، دو مورد وجود دارد که قبلاً تولید شده است. این موارد الزامی است و اگر هر کدام از آنها در خط شما وجود نداشته باشد ، Theme Kit خطایی ایجاد می کند theme.liquid:

• {{ content_for_header }}: تزریق کد از هر چیزی که برای کارکردن ویژگی هایی مانند Shopify Analytics لازم است
• {{ content_for_layout }}: قالب مربوطه را تزریق می کند (به عنوان مثال blog.liquid) ، که همه آنها در ذخیره می شوند /templates

به یاد داشته باشید ، Theme Kit در حال تماشا است. هر زمان که فایل خود را ذخیره می کنید ، Theme Kit تغییرات را در موضوع راه دور شما می داند و به کار می گیرد (اگرچه برای مشاهده آنها باید مرورگر خود را بازخوانی کنید).

مرحله 5: روی مقالات حلقه بزنید (blog.liquid)

در طول این مرحله بعدی ، ما وارد این موضوع می شویم blog.liquid و روی همه مقالات ما حلقه کنید. اگر هنوز چیزی ایجاد نکرده اید ، سر بزنید فروشگاه آنلاین > پست های وبلاگ و یک وبلاگ به همراه مقالات ایجاد کنید ، به یاد داشته باشید که دید آنها را روی آن تنظیم کنید visible (به طور پیش فرض است hidden)

وبلاگ گفته شده را در پیدا خواهید کرد https://<store-name>.myshopify.com/blogs/blog-handle/به وبلاگ پیش فرض Shopify در است /blogs/news/به

چسباندن کد زیر به blog.liquid همه مقالات وبلاگ فعلی را لیست می کند و عنوان مقاله هر یک را در یک صفحه نمایش می دهد <a href> عنصری که به مقاله مربوطه پیوند دارد:

{% for article in blog.articles %}
  <a href="{{ article.url }}">{{ article.title }}</a>
{% endfor %}

خواندن بیشتر:

مرحله 6: خروجی مقاله (article.liquid)

در این مرحله ، ما کد را برای می نویسیم article.liquidبه این مقاله را خروجی می دهد ، اما اگر کاربر یک کاربر نیست ورود به سیستم ، پرداخت مشتری، تار می شود و الف دسترسی داشته باشید دکمه کاربر را به /cart/ (و پس از آن ، پرداخت).

ایجاد “محصول”

اول ، ما باید یک “محصول” ایجاد کنیم که دسترسی به وبلاگ را با هزینه یک بار ارائه می دهد (Shopify می تواند این کار را بومی انجام دهد) یا به صورت اشتراک (برنامه اشتراک Shopify ضروری).

هدایت به محصولات > محصول را اضافه کنید و نام آن را “دسترسی به وبلاگ ممتاز” قرار دهید. به طور طبیعی ، مطمئن شوید که علامت آن را برداشته اید پیگیری مقدار و این یک محصول فیزیکی است چک باکس ها

کلیک صرفه جویی و سپس شناسه محصول را از آدرس URL یادداشت کنید.

کمی منطق بنویسید

برای بررسی اینکه آیا “مورد” در سبد خرید موجود است یا خیر ، از کد زیر استفاده کنید و “ID” را با شناسه محصول خود جایگزین کنید. ما وجود آن را بررسی می کنیم accessInCart بعداً متغیر است تا اطمینان حاصل شود که کاربران نمی توانند به طور تصادفی مورد را دوبار به سبد خرید اضافه کنند:

{% for item in cart.items %}
  {% if item.product.id == "ID" %}
    {% assign accessInCart == "y" %}
  {% endif %}
{% endfor %}

به طور مشابه ، از کد زیر برای بررسی اینکه آیا مشتری (با فرض ورود به سیستم) از قبل دسترسی داشته است استفاده کنید. ما وجود آن را بررسی می کنیم hasAccess بعداً متغیر است تا اطمینان حاصل شود که به مشتریان وارد شده نشان داده نمی شود دسترسی داشته باشید یا مشاهده محتوا محدود شده است.

باز هم ، به یاد داشته باشید که “ID” را با شناسه محصول خود جایگزین کنید:

{% if customer %}
  {% for order in customer.orders %}
    {% for line_item in order.line_items %}  
      {% if line_item.id == "6816002113696" %}
        {% assign hasAccess == "y" %}
      {% endif %}
    {% endfor %}
  {% endfor %}
{% endif %}

برای خشک کردن کد کمی بیشتر (خودت را تکرار نکن) ، هر دوی این قطعات کد را وارد کنید theme.liquid اگر می خواهید یک دسترسی داشته باشید دکمه در هر نقطه غیر از article.liquidبه قرار دادن قطعات کد در theme.liquid تضمین می کند که accessInCart و hasAccess متغیرها می توانند در داخل وجود داشته باشند همه /templatesبه

توجه: شما همچنین می خواهید موارد زیر را وارد کنید “آیا مشتری وارد سیستم شده است یا خیر؟” منطق در theme.liquid به طوری که مشتریان می توانند از هر صفحه یا الگویی وارد سیستم شده یا از سیستم خارج شوند:

{% if customer %}
  <a href="/account/logout/">Logout</a>
{% else %}
  <a href="/account/login/">Login</a>
{% endif %}

مقاله را خروجی بگیرید

بعد ، کد زیر مقاله را خروجی می دهد اما a را اضافه می کند .blurred اگر مشتری به وبلاگ دسترسی ندارد (یا وارد نشده است و بنابراین دسترسی قابل تأیید نیست) کلاس:

<article{% unless hasAccess %} class="blurred"{% endunless %}>
  {{ article.content }}
</article>

کد زیر را در CSS خود قرار دهید تا تار شدن فعال شود:

.blurred {
  opacity: 0.5;
  filter: blur(0.5rem);
  user-select: none; // Prevents text selection
  pointer-events: none; // Prevents click events
}

به عنوان یک امتیاز ، ممکن است بخواهید از کوکی های جاوا اسکریپت یا localStorage اجازه خواندن [x] مقالات ، و سپس موارد فوق را اعمال کنید .blurred فقط بعد از خواندن آن مقالات این امر با ایجاد نمایه شدن مقالات ، SEO را بهبود می بخشد و با ارائه دسترسی محدود ، تبدیل را بهبود می بخشد.

یک دکمه “دریافت دسترسی” ایجاد کنید

در نهایت ، در اینجا این است دسترسی داشته باشید منطق دکمه و نشانه گذاری:

{% unless hasAccess %}
  <a href="/cart/{% unless accessInCart %}add/?id=ID&return_to=/cart/{% endunless %}">Get access</a>
{% endunless %}

یکبار دیگر ، به یاد داشته باشید که “ID” را با شناسه محصول خود جایگزین کنید.

خواندن بیشتر:

مرحله 7: بقیه تم خود را بسازید

افسوس ، آخرین مرحله آن است که باید به تنهایی انجام دهید: برای ایجاد بقیه موضوع خود. در مرحله 1 برخی از آنها را ایجاد کردیم .liquid فایل ها در /templatesبه برخی از این موارد (برای مثال login.liquid و cart.liquid) برای حفظ عملکرد “دسترسی به وبلاگ برتر” ضروری است.

با مسئول مشورت کنید اسناد تم های Shopify، که نه تنها شما را با اصول اولیه ایجاد تم Shopify آشنا می کند ، بلکه هر فرد را نیز راهنمایی می کند .liquid قالب (در اینجا چند نمونه کد برای login.liquid آمده است، مثلا).

از توسعه بقیه موضوع Shopify خود لذت ببرید!