গভীরতার টিউটোরিয়াল: প্রতিক্রিয়া এবং রেডাক্স সহ শপাইফের স্টোরফ্রন্ট এপিআই ব্যবহার করা

সবার জন্য ই-বাণিজ্য! (... ওয়েবসাইটগুলি, এটি )

ক্রিস লিখেছেন আগস্ট 2018 এ, নভেম্বর 2018 আপডেট হয়েছে

পেক্সেলস.কম এ সৌজন্যে নেতিবাচক স্থান

পটভূমি এবং প্রেরণা

সুতরাং এখানে অনুপ্রেরণা ছিল বেশ সহজ। আমি চেয়েছিলাম যে আমার ওয়েবসাইট দর্শনার্থীরা আমাদের শপাইফাই ওয়েবসাইটে না গিয়ে সরাসরি কাস্টম ডোমেনে পণ্যগুলি ব্রাউজ করতে, খুঁজে পেতে এবং নির্বাচন করতে সক্ষম হবে।

গৌণ প্রেরণা হ'ল শপাইফের কারখানার টেম্পলেটগুলির মধ্যে একটির চেয়ে আমার নিজের ওয়েবসাইটের জন্য নিজস্ব কোড বেস থাকতে হবে। কোনও অপরাধ শপাইফের দল নয়! টেমপ্লেটগুলি আধুনিক এবং পরিষ্কার, তবে সেগুলি বরং সহজ। আমি নিশ্চিত যে এই টেমপ্লেটগুলি অত্যন্ত স্বনির্ধারিত, তবে আমি বর্তমানে সেগুলি সম্পর্কে সচেতন নই।

সুতরাং এটি উভয় বিশ্বের সেরা - আমার কাস্টম প্রতিক্রিয়া সাইট (ইতিমধ্যে নির্মিত এবং অনলাইন), শপাইফাইয়ের এপিআই এবং চেকআউট প্রক্রিয়া যুক্ত হয়েছে!

এই টিউটোরিয়ালটির শেষে, আপনি আপনার ওয়েবসাইটের যে কোনও পৃষ্ঠায় আপনার শপাইফ পণ্যগুলি যুক্ত করতে সক্ষম হবেন। শপাইফিতে শপিং প্রক্রিয়াটির একমাত্র অংশটি যখন ব্যবহারকারী চেকআউট ক্লিক করে।

আমি এই টিউটোরিয়ালটির জন্য একটি খালি বয়লারপ্লেট সংগ্রহস্থলও তৈরি করেছি।

এখানে মিডিয়ামে লেখার অনুপ্রেরণাটি কেবল এটাই ছিল যে আমি নিজেই এই প্রক্রিয়াটির একটি টিউটোরিয়ালটি খুঁজে পাই না - তাই আমি সিদ্ধান্ত নিয়েছিলাম যে এটি করার জন্য!

আমি 4 বছর ধরে একজন পেশাদার বিকাশকারী এবং 7 এর জন্য প্রোগ্রামিং করছি I've আমি পুরানো স্কুল ফোর্টরান এবং পার্ল থেকে প্রতিক্রিয়া, জাভাস্ক্রিপ্ট, পাইথন এবং নোডের প্রযুক্তিগত স্ট্যাকের উপর কাজ করেছি।

সাইরেন পোশাক হ'ল আমার প্রকল্প / স্টার্ট-আপ / মেকার সংস্থাগুলির মধ্যে একটি যা আমি ৫ বছর ধরে চালাচ্ছি, এবং আমরা এ পর্যন্ত 5 টি বিভিন্ন পুলিশ এবং ফায়ার বিভাগকে অনুদান দিয়েছি!

অবশেষে এই টিউটোরিয়াল দিয়ে শুরু করা যাক।

শপফাই স্টোরফ্রন্ট এপিআই

শপাইফের দুর্দান্ত লোকেরা স্টোরফ্রন্ট এপিআই একসাথে রাখে। স্টোরফ্রন্ট এপিআই আপনাকে আপনার নিজস্ব শপাইফাইড সাইটে পণ্য চিত্র, পণ্যের রূপগুলি, পণ্যের আকার, শপিং কার্ট এবং "কার্টে যুক্ত করুন" এবং "চেকআউট" বোতাম যুক্ত করতে প্রতিক্রিয়া উপাদান তৈরি করতে দেয় allows

* মনে রাখবেন যে এই টিউটোরিয়ালটি শপাইফ পোলারিস সম্পর্কিত নয়, যা শপাইফ স্টোর ম্যানেজমেন্টের জন্য প্রতিক্রিয়াতে উপাদান তৈরি করতে ব্যবহৃত হয়।

প্রথম পদক্ষেপ: প্রতিক্রিয়া-জেএস-কিনুন সংগ্রহস্থল

শপাইফ দল দ্বারা নির্মিত এই প্রতিক্রিয়াটির উদাহরণটি দেখুন। এই টিউটোরিয়ালের বেশিরভাগ কোডই এই সংগ্রহস্থল থেকে আসে।

... আপনি কি এটি একবার দেখেছেন? ভাল!

এখন আসুন সরাসরি কোডে ঝাঁপ দাও! আপনার প্রতিক্রিয়া সাইটের মূল ফোল্ডারে যান এবং টার্মিনাল থেকে শপাইফাই-বডি মডিউল ইনস্টল করুন:

সিডি আমার-অসাধারণ-প্রতিক্রিয়া-প্রকল্প / এনপিএম ইনস্টল - সেভ শপাইফাই-কিনুন

(বা আপনি যদি সুতা পছন্দ করেন তবে শপাইফাই-কিনে সুতা যোগ করুন)

তারপরে আপনাকে জেএস বাই এসডিকে থেকে আপনার ফ্রন্টএন্ড ফাইল ইনডেক্স.জেজে (অ্যাপ্লিকেশন.জেএস নয়!) ক্লায়েন্টটি আমদানি করতে হবে:

'শপাইফাই-বাই' থেকে ক্লায়েন্ট আমদানি করুন;

তারপরে ReactDOM.reender () কলের উপরে নিম্নলিখিত কনফিগারেশন অবজেক্টটি যুক্ত করুন:

কনস্ট্যান্ট ক্লায়েন্ট = ক্লায়েন্ট.বিল্ডক্লিয়েন্ট ({storefrontAccessToken: 'আপনার অ্যাক্সেস টোকেন', ডোমেন: 'your-shopify-url.myshopify.com'});

ইন্ডেক্স.জেএস এর জন্যই এটি - আমরা শীঘ্রই এটি পেয়ে যাব।

একটি মসৃণ শপিং এবং চেকআউট অভিজ্ঞতার জন্য এখন প্রয়োজনীয় সমস্ত উপাদান যুক্ত করা যাক। বিক্রিয়া-জেএস-কিনুন সংগ্রহস্থল থেকে সমস্ত উপাদান অনুলিপি করুন:

কার্ট.জেএস

LineItem.js

Product.js

Products.js

ভেরিয়েন্টসিলেক্টর.জেএস

আমরা এই উপাদানগুলি আপনার এসআরসি / ফোল্ডারে কোনও উপাদান / শপাইফাই / ফোল্ডারে রাখব। আপনি যদি চান তবে এই উপাদানগুলির ফাইলগুলি এসআরসি / ফোল্ডারে অন্যত্র রাখতে পারেন। টিউটোরিয়ালটির বাকী অংশ ধরে নিলে আপনার সেগুলি উপাদান / শপাইফাই / আছে।

App.js পরিবর্তন করুন

App.js এর ব্যাপক পরিবর্তন দরকার। প্রথমে কার্টের উপাদানটি আমদানি করুন যা আপনি কেবল নিজের প্রকল্পে অনুলিপি করেছেন:

'। / কম্পোনেন্টস / শপাইফাই / কার্ট' থেকে গাড়ি আমদানি করুন;

যদি আপনার App.js উপাদানটি আমার মতো রাজ্যহীন ছিল তবে আপনার এই সম্পূর্ণ নির্মাণকারী () ফাংশনটি নিরাপদে অনুলিপি করা উচিত:

নির্মাণকারী () {সুপার (); this.updateQuantityInCart = this.updateQuantityInCart.bind (এটি); this.removeLineItemInCart = this.removeLineItemInCart.bind (এটি); this.handleCartClose = this.handleCartClose.bind (এটি); }

আপনার যদি ইতিমধ্যে কোনও স্থিতি থাকে তবে কেবল এই বাঁধাই করা লাইনগুলি অনুলিপি করুন। এই তিনটি লাইন ইভেন্ট হ্যান্ডলার ফাংশন যা শপাইফ শপিং কার্টের সঠিকভাবে কাজ করতে হবে to

"তবে গাড়ির অবস্থা কী?"

তুমি জিজ্ঞাসা করতে পার; বা:

"শপিং কার্টের জন্য এই ইভেন্ট হ্যান্ডলারগুলি সংজ্ঞায়িত করার বিষয়ে কী?"

এটা আসছে, কিন্তু এখনও না!

তারপরে আপনি এটি ব্যবহার করতে পারেন ডিভ শেষ হওয়ার আগে আপনার রেন্ডার () ফাংশনের নীচে অংশ যুক্ত করুন।

আমার মতে, শপিং কার্টটি আপনার অ্যাপ্লিকেশনটিতে সর্বত্র পাওয়া উচিত। তাই আমি মনে করি এটি উপাদানটি ব্যবহার করা বোধগম্য আপনার অ্যাপ্লিকেশন এর মূল উপাদান - অন্য কথায়, App.js:

ফিরে ( ... );

আবার, আমি এখনও কার্ট ইভেন্ট হ্যান্ডলারগুলিতে কোনও কোড যুক্ত করি নি। এছাড়াও, আমি অ্যাপ.জেএস-তে শপিং কার্টের স্থিতির উপাদানগুলির অভাব স্থির করে নেই।

এর ভাল কারণ রয়েছে।

এই প্রকল্পের মাঝামাঝি সময়ে, আমি দেখতে পেলাম যে আমার পণ্যের উপাদান অবশ্যই আমার অ্যাপ.জেএস ফাইলটিতে নেই।

পরিবর্তে, এটি তিনটি সন্তানের উপাদানকে সমাহিত করা হয়েছিল।

তিন স্তরে বাচ্চাদের কাছে পণ্যগুলি প্রেরণের পরিবর্তে ফাংশন হ্যান্ডলারগুলিকে শীর্ষে নিয়ে যাওয়ার ...

আমি পছন্দ করেছিলাম…

রেডাক্স !!!

পোহ! আমি জানি, আমি রেডাক্সকে জানি, যদিও খুব কঠিন নয়, এটি% * $ এর ব্যথা! সমস্ত প্রয়োজনীয় বয়লার প্লেট দিয়ে শুরুতে তারযুক্ত হতে হবে। তবে, আপনি যদি কোনও ইকমার্স স্টোর বা ইকমার্স ব্যবসায়ের মালিকের বিকাশকারী হন তবে এটি কল্পনা করুন: রেডাক্স আপনাকে আমাদের ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশনটিতে কোনও উপাদান বা পৃষ্ঠা থেকে শপিং কার্টের স্থিতি অ্যাক্সেস করতে দেয় allows ।

সাইরেন পোশাক প্রসারিত হওয়ার সাথে সাথে আমরা আরও পণ্য বিকাশ করার সাথে সাথে এই ক্ষমতাটি প্রয়োজনীয় হবে। আমরা যদি আরও পণ্য তৈরি করি তবে আমি সমস্ত পণ্যাদির সাথে একটি পৃথক শপ পৃষ্ঠা তৈরি করব এবং কেবলমাত্র মুখ্য কয়েকটি বৈশিষ্ট্যযুক্ত পণ্যগুলি হোমপেজে রেখে দেব leave

কোনও ব্যবহারকারী যখন একটু শপিং করেন, সিরেন অ্যাপারেলের কিছু আইটেম বা তথ্য পড়েন এবং তারপরে চেক আউট করার সিদ্ধান্ত নেন তখন শপিং কার্টে অ্যাক্সেসের দক্ষতা অপরিহার্য। আপনি কতটা সরান তা বিবেচ্য নয়, আপনার শপিং কার্টের কোনও কিছুই হারাবে না!

সংক্ষেপে, আমি সিদ্ধান্ত নিয়েছি যে এখনই রেডাক্স বাস্তবায়ন করা আরও ভাল তবে কোড ওয়েবসাইটটি আমাদের ওয়েবসাইটের পক্ষে খুব বড় নয়।

শ্যারিফাই বেড ন্যূনতম বয়লারপ্লেট সহ এসডিকে কেনার জন্য রেডাক্সের বাস্তবায়ন

এনপিএম প্যাকেজ রিডুএক্স ইনস্টল করুন এবং রিডাক্ট-রিডেক্স:

এনপিএম ইনস্টল - সেভ রিডেক্স রিঅ্যাক্ট-রিডেক্স

প্রতিক্রিয়া-রিডাক্স সরবরাহকারী এবং আপনার স্টোরকে ./store থেকে index.js এ আমদানি করুন:

'রিএ্যাক্ট-রিডেক্স' থেকে 'সরবরাহকারী' আমদানি করুন; './Store' থেকে লোড আমদানি করুন;

মোড়ানো আপনার স্থানান্তরিত স্টোর সহ উপাদান আপনার রেডাক্স স্টোরের সাথে আপনার অ্যাপ্লিকেশনটি সংযুক্ত করতে index.j এ:

ReactDOM.render ( , document.getElementById ('রুট'));

(মনে রাখবেন আমারও একটা আছে নিজস্ব, তবে সিরেন পোশাক ওয়েবসাইটে কন্টেন্টটিকে গতিশীলভাবে রেন্ডার করতে কীভাবে আন্তর্জাতিকীকরণ এবং স্থানীয়করণ ব্যবহার করেছি সে সম্পর্কে অন্য একটি পোস্টে। অন্য এক দিনের জন্য আর একটি গল্প।)

অবশ্যই আমরা এখনও একটি ./store.js ফাইল তৈরি করি নি। আপনার দোকান store.jsin src / root এ তৈরি করুন এবং এটি আটকে দিন:

redu createStore '' redxx 'থেকে আমদানি; './Reducers/cart' থেকে আমদানিকারকগুলি আমদানি করুন;
এক্সপোর্ট ডিফল্ট ক্রিয়েস্টোর (রিডুসার);

এসআরসি / হ্রাসকারী / কার্ট.জেজে আপনার হ্রাসকারী ফাইল তৈরি করুন এবং এই কোডটি আটকে দিন:

// ইনিশিয়াল স্ট্যান্ড কনস্ট আরম্ভসেট = {ইস্কার্টওপেন: মিথ্যা, চেকআউট: {লাইন আইটেমস: []}, পণ্য: [], ব্যবসা: {}}
// const ক্রিয়া CLIENT_CREATED = 'CLIENT_CREATED' const PRODUCTS_FOUND = CHECKOUT_FOUND const 'PRODUCTS_FOUND' = 'CHECKOUT_FOUND' const SHOP_FOUND = 'SHOP_FOUND' const ADD_VARIANT_TO_CART = 'ADD_VARIANT_TO_CART' const UPDATE_QUANTITY_IN_CART = 'UPDATE_QUANTITY_IN_CART' const REMOVE_LINE_ITEM_IN_CART = 'REMOVE_LINE_ITEM_IN_CART' const OPEN_CART = 'OPEN_CART 'কনস্ট্যান্ট CLOSE_CART =' CLOSE_CART '
// হ্রাস রফতানি ডিফল্ট (state = initState, ক্রিয়া) => {স্যুইচ (অ্যাকশন.টাইপ) {কেস CLIENT_CREATED: রিটার্ন state ... রাষ্ট্র, ক্লায়েন্ট: এক্সন.পেইলড} কেস PRODUCTS_FOUND: রিটার্ন {... রাষ্ট্র, পণ্য: ক্রিয়াকলাপ.পাইললোড} কেস CHECKOUT_FOUND: ফিরুন {... রাষ্ট্র, চেকআউট: এক্সন.পেইলড} কেস শপ_ফাউন্ড: রিটার্ন {... রাজ্য, দোকান: অ্যাকশন.পেইলোড} কেস ADD_VARIANT_TO_CART: ফিরুন {... রাষ্ট্র, isCartOpen: ক্রিয়া। payload.isCartOpen, চেকআউট: action.payload.checkout} কেস UPDATE_QUANTITY_IN_CART: রিটার্ন {... রাষ্ট্র, চেকআউট: action.payload.checkout} কেস REMOVE_LINE_ITEM_IN_CART: প্রত্যাবর্তন {... রাষ্ট্র, চেকআউট: ক্রিয়াকলাপ.কমলড চেকআউট} কেস ওপেন_কার্ট : প্রত্যাবর্তন {... রাষ্ট্র, isCartOpen: সত্য} কেস CLOSE_CART: প্রত্যাবর্তন {... রাষ্ট্র, isCartOpen: মিথ্যা} মানক: ফেরতের স্থিতি}

চিন্তা করবেন না, আমি কেবল এই বড় রিডিউসারটি পোস্ট করব না এবং কী চলছে তা নিয়ে আলোচনা করব না। আমরা প্রতিটি অনুষ্ঠানে আসি! এখানে কিছু বিষয় মনে রাখা উচিত।

শপাইফ গিটহাবের উদাহরণে রাজ্য যা লিখেছিল তা থেকে আমরা প্রাথমিক অবস্থাটি নিয়ে থাকি এবং এটি আমাদের আর্ট স্টেটে সন্নিবেশ করান, যথা রাজ্যের নিম্নলিখিত চারটি অংশ:

#CartOpen: মিথ্যা, চেকআউট: {লাইন আইটেম: [] products, পণ্য: [], ব্যবসা: {}

তবে, আমার বাস্তবায়নে আমি রাজ্যের একটি ক্লায়েন্ট অংশও তৈরি করছি। আমি একবার createClient () ফাংশনটি কল করি এবং তারপরে অবিলম্বে এটি red.x রাজ্যটিতে index.js এ সেট করি। সুতরাং আসুন index.js- এ যান:

Index.js এ ফিরে যান

কনস্ট্যান্ট ক্লায়েন্ট = ক্লায়েন্ট.বিল্ডক্লিয়েন্ট ({storefrontAccessToken: 'your-shopify-token', ডোমেন: 'your-shopify-url.myshopify.com'}); store.dispatch ({প্রকার: 'CLIENT_CREATED', পে-লোড: ক্লায়েন্ট});

শপাইফ কিনে এসডিকে উদাহরণে, পণ্যগুলি সম্পর্কে তথ্য পেতে এবং প্রতিক্রিয়া ফাংশন উপাদান উইলমাউন্ট () তে তথ্য সঞ্চয় করার জন্য কিছু অ্যাসিনক্রোনাস কল রয়েছে। এই নমুনা কোডটি এর মতো দেখাচ্ছে:

উপাদানউইলমাউন্ট () {this.props.client.checkout.create ()। তারপরে ((res) => {this.setState ({চেকআউট: পুনরায়,});});
এই.প্রপস.কমেন্ট.প্রোডাক্ট.ফ্যাচএল ()। তারপরে ((res) => {this.setState ({পণ্যগুলি: res,});});
this.props.client.shop.fetchInfo ()। তারপরে ((res) => {this.setState ({ব্যবসা: res,});}); }

আমি কোনও সাইট লোডের আগে যথাসম্ভব index.js এ সরাসরি এটি বেছে নিয়েছি। তারপরে প্রতিক্রিয়ার প্রতিটি অংশ প্রাপ্ত হওয়ার পরে আমি একটি উপযুক্ত ঘটনা ছুঁড়েছি:

// বিল্ডক্লিয়েন্ট () সিঙ্ক্রোনাস তাই আমরা এর পরে সমস্তগুলিকে কল করতে পারি! ক্লায়েন্ট.প্রডাক্ট.ফ্যাচএল ()। তারপরে ((পুনরায়) => {store.dispatch ({প্রকার: 'PRODUCTS_FOUND', পে-লোড: রেজোল});}); ক্লায়েন্ট.চেকআউট.ক্রিয়েট ()। তারপরে ((res) => {store.dispatch ({প্রকার: 'CHECKOUT_FOUND', পে-লোড: রেজ});}); client.shop.fetchInfo ()। তারপরে ((res) => {store.dispatch ({প্রকার: 'শপ_ফাউন্ড', পে-লোড: রেজো});});

হ্রাসকারী এখন তৈরি করা হয়েছে এবং সূচি.জেএস এর জন্য শপাইফাই এপিআই ক্লায়েন্টের সূচনা সম্পন্ন হয়েছে।

App.js এ ফিরে যান

এখন অ্যাপ.জেজেজে অ্যাপ স্ট্যাটাসের সাথে রেডাক্স স্টোরটি সংযুক্ত করুন:

'রিএ্যাক্ট-রিডেক্স' থেকে আমদানি করুন;

এবং দোকানটিও আমদানি করতে ভুলবেন না:

'./Store' থেকে লোড আমদানি করুন;

নিম্ন বিভাগে ডিফল্ট রফতানি অ্যাপ্লিকেশনটি নিম্নরূপে পরিবর্তন করুন:

এক্সপোর্ট ডিফল্ট সংযোগ ((রাষ্ট্র) => রাষ্ট্র) (অ্যাপ);

এটি অ্যাপের উপাদানগুলির সাথে রেডাক্স স্থিতিকে সংযুক্ত করে।

এখন আমরা রেডাক্স থেকে গেটস্টেট () এর সাথে রেন্ডার () ফাংশনে রেডাক্সের স্থিতি অ্যাক্সেস করতে পারি (ভ্যানিলা প্রতিক্রিয়াটির এটি.স্টেট ব্যবহার করার বিপরীতে):

রেন্ডার () {... const state = store.getState (); }

শেষ অবধি: ইভেন্ট হ্যান্ডলার (আমরা এখনও App.js এ আছি)

উপরের দিক থেকে, আপনি জানেন যে আমাদের কেবল অ্যাপ.জেজে তিনটি ইভেন্ট হ্যান্ডলারের প্রয়োজন কারণ শপিং কার্টটিতে কেবল তিনটি ব্যবহার করা হয়: আপডেটকুইন্টিআইএনকার্ট, রিমুভলাইনআইটেমইনকার্ট এবং হ্যান্ডেলকার্টক্লোজ। গিটহাব সংগ্রহস্থল থেকে আসল কার্ট ইভেন্ট হ্যান্ডলারগুলি যা স্থানীয় উপাদান অবস্থাকে ব্যবহার করে তা দেখে মনে হচ্ছে:

updateQuantityInCart (লাইন আইটেম আইডি, পরিমাণ) {কনট চেকআউটআইডি = এই.স্টেট।
এই.পড়েন.প্রেস.সি.এল.সি.এইচ.এইচ.ডি.পডেটলাইন আইটেমগুলি (চেকআউটআইডি, লাইন আইটেমটোওআপডেট) থেকে ফিরে এসেছে then }
সরানলাইনআইটেমইনকার্ট (লাইন আইটেম আইডি) {চেক আউট আইডি = এটি.স্টেট.সিএকআউট.আইডি
এটি.পড়েন.প্লিয়েন্টস.লিয়েন্ট.কেইকআউট.রেমভলাইন আইটেমগুলি (চেকআউটআইডি, [লাইন আইটেম আইডি]) ফিরিয়ে দিন। তারপরে (res => {this.setState ({চেকআউট: res,});}); }
হ্যান্ডেলকার্টক্লোজ () {this.setState ({isCartOpen: মিথ্যা,}); }

নিম্নরূপে Redux স্টোরগুলিতে ইভেন্টগুলি প্রেরণের জন্য আমরা এটি পুনরায় ডিজাইন করতে পারি:

updateQuantityInCart (lineItemId, পরিমাণ) {const state = store.getState (); // রেডাক্স স্টোর কনট চেকআউটআইডি থেকে = state.checkout.id কনট লাইনআইটেমসটু আপডেট = [{আইডি: লাইন আইটেম আইড, পরিমাণ: পার্সইন্ট (পরিমাণ, 10)}] state.client.checkout.updateLineItems (চেকআউটআইডি, লাইনআইটেমটুকু পুনরায় (পুনর্নির্মাণ)) State >; store.dispatch ({প্রকার: 'UPDATE_QUANTITY_IN_CART', পে-লোড: {চেকআউট: রেজ res});}); }LineItemInCart (lineItemId) {const state = store.getState (); // রেডাক্স স্টোর কনট চেকআউটআইডি = state.checkout.id state.client.checkout.removeLineItems (চেকআউটআইডি, [লাইন আইটেম আইডি]) থেকে স্টেট। তারপরে (res => {store.dispatch ({প্রকার: 'REMOVE_LINE_ITEM_IN_CART', পে-লোড: {চেকআউট: রেজ res});}); } হ্যান্ডেলকার্টক্লোজ () {store.dispatch ({প্রকার: 'CLOSE_CART'}); } হ্যান্ডেলকার্টওপেন () {store.dispatch ({প্রকার: 'OPEN_CART';); }

আপনি যদি বরাবর অনুসরণ করেন তবে আমি আগেই উল্লেখ করেছি যে আমি আমার নিজস্ব হ্যান্ডেলকার্টওপেন ফাংশনটি যুক্ত করেছি কারণ আমার কাছে এই প্রস্তাবটি রয়েছে - উপাদানটি পাস করুন যাতে কোনও ব্যবহারকারী এনএভি-র একটি লিঙ্কের মাধ্যমে শপিং কার্টটি খুলতে এবং বন্ধ করতে পারে। ভবিষ্যতে আমি এই ফাংশনটি প্রপ হিসাবে চালিয়ে না গিয়ে নিজেই নাভিতে স্থানান্তর করতে পারি, কারণ রেডাক্স স্টোর অবশ্যই সেখানে উপলব্ধ থাকবে!

শেষ পর্যন্ত এটি যোগ করুন সংমিশ্রণ যোগ!

সুতরাং আপনার শপাইফ স্টোরের উপযুক্ত পণ্যটির দিকে ইঙ্গিত করে কয়েকটি সাধারণ রেফারেন্স সহ আপনার একটি সহজ ব্যবসা রয়েছে? হা! এগুলি মুছুন এবং এগুলি আপনার একেবারে নতুনের সাথে প্রতিস্থাপন করুন -উপাদান!

প্রথমে আপনি যে স্টোরের মার্কআপটি চান তা সেই উপাদানটি আমদানি করুন। (মনে রাখবেন, আমি শপাইফাই নমুনা উপাদানগুলিকে আমার কোডবেসে শপাইফ /। নামে একটি ফোল্ডারে রেখেছি)

এটি আপনার পণ্য যেখানেই আছে is (আমি তৈরি বয়লারপ্লেট সংগ্রহস্থলগুলিতে, আমি জেনেরিক প্রোডাক্টস পেজ উপাদানটিতে এটি রেখেছি যাতে এই কোডটি যে কোনও পৃষ্ঠাতে কোনও বিভাগে থাকতে পারে যা কোনও পৃষ্ঠা বিভাগে প্রয়োগ করা যেতে পারে signal)

'./Shopify/Products' থেকে পণ্য আমদানি করুন;

এখন, রেডাক্স বয়লারপ্লেট কোডটি প্রসেসিংটি শেষ 15 থেকে 20 মিনিটের মধ্যেই অর্থ প্রদান করে: আমরা আমাদের অবস্থার পণ্য অংশটি রেকর্ড করতে পারি - ভ্যানিলা প্রতিক্রিয়া রাষ্ট্রের মাধ্যমে নয়, যা বার বার প্রপসের মাধ্যমে প্রেরণ করা হয় - তবে রেডাক্স রাজ্যের মাধ্যমে, একটি ঝরঝরে ওয়ান-লাইনার কনস্টেট অবস্থায় = store.getState () ;:

রেন্ডার () {const state = store.getState (); // রেডাক্স স্টোর থেকে স্টেটে oProducts = দেওয়া যাক ;

উপাদানটি নিজের রেন্ডার () ফাংশনে আপনি যেখানে রাখতে চান তা নিজেই রাখতে ভুলবেন না। আমার জন্য, এই জায়গাটি বুটস্ট্র্যাপ স্টাইলের ক্লাস এবং এইচটিএমএল মধ্যে সমাধিস্থ করা হয়েছিল:

... {/ * /। সারি * / {/ * /। পরিষেবা-সামগ্রী-এক * / / ...

পরিশেষে, শপিং কার্টের সাথে এই পণ্য উপাদানটির সাথে কাজ করার জন্য আমাদের একক ইভেন্ট ফাংশন অ্যাডভ্যারিয়েন্টটোকার্ট প্রয়োজন। আবার রেফারেন্সের জন্য, এখানে ভ্যানিলা প্রতিক্রিয়া সহ অ্যাডভ্যারেন্টটোকার্ট (শপাইফ নমুনা সংগ্রহস্থল থেকেও) এর আসল সংস্করণটি রয়েছে:

#VariantToCart (ভেরিয়েন্টআইড, পরিমাণ) {this.setState ({isCartOpen: সত্য,});
কনস্ট লাইনআইটেমটওএডড = [{ভেরিয়েন্টআইডি, পরিমাণ: পার্সেন্ট (পরিমাণ, 10) const] কনট চেকআউটআইডি = এটি.স্টেট.সিএকআউট.আইডি
এই.পড়েন.পলিটস.লাইন.টেক.একডলাইনআইটেমস (চেকআউটআইড, লাইনআইটেমটোএডড) এর রিটার্ন .থেন (পুনরায় =>। This.setState ({চেকআউট: রেজ,});}); }

এবং নতুন, রেডাক্স-বান্ধব store.dispatch () সংস্করণ:

addVariantToCart (ভেরিয়েন্টআইড, পরিমাণ) {কনস্টেট স্টেট = স্টোর.সেট স্টেট (); // রেডাক্স স্টোর কনট লাইন আইটেমস টোঅ্যাডড = [[{ভেরিয়েন্ট আইড, পরিমাণ: পার্সেন্ট (পরিমাণ, 10) const] কনট চেকআউটআইড = state.checkout.id state.client.checkout.addLineLineItems (চেকআউটআইডি, লাইন আইটেমস টোআড যোগ করুন)। তারপর (পুনরায়>> {{) { store.dispatch ({প্রকার: 'ADD_VARIANT_TO_CART', পে-লোড: {isCartOpen: সত্য, চেকআউট: পুনরায়}});}); }

কোনটি অবশ্যই আমরা ব্যবহার করতে যাচ্ছি।

এটি নির্মাণকারীর সাথে আবদ্ধ করতে ভুলবেন না:

this.addVariantToCart = this.addVariantToCart.bind (এটি);

এছাড়াও, আপনাকে এই উপাদানটিকে অ্যাপ.জেএস এর মতো স্টোরের সাথে সংযুক্ত করতে হবে এবং স্টোরটি আমদানি করতে হবে:

re সংযুক্ত '' রিএ্যাক্ট-রেডেক্স 'থেকে আমদানি' ../store 'থেকে আমদানি করুন;

উপরে এবং (আপনি শপাইফ পণ্য সামগ্রীর নামটি নির্দিষ্ট করেছেন এমন উপাদানটি ধরে নেওয়া হচ্ছে জেনেরিকপ্রডাক্ট পেজ:

রফতানি ডিফল্ট সংযোগ ((রাষ্ট্র) => রাষ্ট্র) (জেনেরিকপ্রডাক্টেজ পেজ);

নিচে.

দুর্দান্ত! উপাদানগুলি কত গভীরভাবে সমাহিত করা হয় বা যেখানেই আপনার পণ্যের উপাদান ঘোষিত হয়, এটি গাড়ির স্থিতির সাথে যোগাযোগ করতে পারে!

শেষ বোনাস উদাহরণ: আপনার শিরোনাম বা নেভিগেশনে শপিং কার্ট

আপনি যদি নিজের শিরোলেখ / ন্যাভিগেশন বারে "শপিং কার্ট" বোতাম চান, তবে আপনার নেভিগেশন উপাদানটির রেন্ডারিং ফাংশনে সেই বোতামটি যুক্ত করুন (বুটস্ট্র্যাপ শৈলীর সাথে আমার বর্তমান সাইটের একটি উদাহরণ - খুব সাধারণ সংস্করণ বয়লার প্লেটের উদাহরণে পাওয়া যাবে) :

এখানে, হ্যান্ডেলকার্টওপেন হ'ল একটি নতুন হ্যান্ডলার পদ্ধতি যা আপনাকে App.js এ যুক্ত করতে হবে:

নির্মাণকারী () {সুপার (); ... this.handleCartOpen = this.handleCartOpen.bind (এটি); ...

কনস্ট্রাক্টর মধ্যে। তারপরে আপনি যখন অ্যাপ.জেজে আপনার ন্যাভ উপাদানটি উল্লেখ করেন (বা যেখানে আপনি আপনার ন্যাভি রাখেন সেখানে), ফাংশন হ্যান্ডলারটি পাস করুন:

এটি রেডাক্সের একটি ইভেন্টেও পুনরায় তৈরি করা যেতে পারে, তবে এটি যেহেতু এটি কেবলমাত্র ছোট ছিলাম আমি এটি ভ্যানিলা প্রতিক্রিয়া পদ্ধতিতে করেছিলাম।

স্টাইলিং উপাদান

আমি স্টোরফ্রন্ট-এপিআই নমুনা সংগ্রহস্থলের শেয়ার্ড / ফোল্ডারে শপাইফের সিএসএস ফাইল, অ্যাপসিএসএস-এ ভরসা করেছি (আপনি এটি মিস করতে পারবেন না, এটি ভাগ করা / এ একমাত্র ফাইল)।

এটি আপনার স্টাইল / ফোল্ডারে বা যেখানেই এটি হওয়া দরকার সেখানে অনুলিপি করে তা আপনার সূচি.জেএস ফাইলটিতে আটকান তা নিশ্চিত করুন। আমার সূচক.জেজে এটি দেখতে এমন দেখাচ্ছে:

আমদানি করুন './styles/shopify.css';

তার পর থেকে, আমি শপাইফাই নমুনা ভাণ্ডারটিতে থাকা অ্যাপ সিএসএসের নাম দিয়েছিলাম শপাইফাইএসএসএস এবং এটিকে ফোল্ডার স্টাইলে স্থানান্তরিত করেছি। এই সম্মেলনটি বয়লারপ্লেট সংগ্রহস্থল কোডেও ব্যবহৃত হয়।

এখান থেকে শপাইফাইএসএসে ঠিক কোথায় বাটনগুলির জন্য হালকা নীল ডিফল্ট রঙ সংজ্ঞায়িত করা হয়েছে তা দেখতে খুব সহজ। আমি আপনার জন্য সিএসএসের বিস্তারিত সমন্বয়গুলি সংরক্ষণ করব save

তবে কে জানে, সম্ভবত আমি এটি কোনও সময়ে পোস্ট করব - তবে আমি শপাইফের স্টাইলগুলি দেখতে বেশ ভাল এবং সহজেই পরিবর্তন করতে পেলাম।

টেকওয়েস

আমার মতে এটি Redux- এর একটি নিখুঁত (করণীয় তালিকার ব্যবহার) ব্যবহার। রেডাক্স সুন্দরভাবে ইভেন্ট ফাংশন এবং শপাইফ শপিং কার্টের স্থিতি সংগঠিত করে এবং অন্য যে কোনও উপাদান থেকে শপিং কার্টের স্থিতি অ্যাক্সেস করা সহজ করে। বাচ্চাদের স্ট্যাটাসের টুকরো টুকরো টুকরো করা এবং একাধিক ইভেন্ট হ্যান্ডলার ব্যবহার করে পুনরায় প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে উচ্চ স্তরের ফাংশনে ইভেন্টগুলি প্রেরণ করার চেয়ে এটি রক্ষণাবেক্ষণ করা অনেক সহজ।

টিউটোরিয়ালের উদাহরণ হিসাবে দেখানো হয়েছে, আপনি নাভি উপাদান এবং হোম পৃষ্ঠার দোকান এলাকায় শপিং কার্টের স্থিতি অ্যাক্সেস করতে পারেন। একবার সাইরেন পোশাক প্রস্তুত হয়ে গেলে আমি এটিকে সহজেই কোনও ধরণের বৈশিষ্ট্যযুক্ত পণ্য অঞ্চলে যুক্ত করতে পারি।

কোডটি সন্ধান করুন

এই প্রয়োগের একটি বয়লারপ্লেট সংগ্রহস্থল এখানে পাওয়া যাবে। এটি অ্যাপ্লিকেশন তৈরি এবং প্রতিক্রিয়া জানার জন্য একটি নিকট-ফাঁকা অ্যাপ্লিকেশন, তবে সূচি.জে এবং অ্যাপ.জেজে প্রয়োগ করা এই টিউটোরিয়ালের সমস্ত পরিবর্তনের পাশাপাশি একটি সুপার বেসিক জেনেরিক স্টোরপেজ এবং নাভ উপাদান।

এই টিউটোরিয়ালটি বোধগম্য হয়েছে তা নিশ্চিত করার জন্য আমি এখানে আমার নিজস্ব টিউটোরিয়ালটি পুনরায় পড়ার এবং আপডেট করার সময় রেপোতে কোড তৈরি করেছি!

কারণ আমি পাগল সাইরেন অ্যাপারেলের ওয়েবসাইট সম্পূর্ণ উন্মুক্ত। সুতরাং আপনি যদি আমার বাস্তবায়নটি সম্পর্কে বোকা বানাতে চান তবে সংগ্রহস্থলটি দেখুন!

আমি আশা করি আপনি এই টিউটোরিয়ালটি উপভোগ করেছেন! যদি কিছু পরিষ্কার হয় না বা কেবল কাজ করে না, দয়া করে আমাকে জানান! আমি তোমাকে সাহায্য করার চেষ্টা করব!

সিএসএস-স্নিপেটস থেকে লিসা কাতালানোকে ধন্যবাদ বয়লারপ্লেট সংগ্রহস্থলটিতে আমি যে সাধারণ এনএভি উদাহরণ ব্যবহার করেছি তার জন্য ধন্যবাদ!

নীচে!

ক্রিস