Squarespace एकीकरण#
Room Visualizer को Squarespace पर कोड इंजेक्शन के माध्यम से इंस्टॉल करें और उन स्थानों पर उत्पाद-विशिष्ट कंटेनर रखें जहाँ पेज एडिटर कस्टम कोड की अनुमति देता है।
** सत्यापन स्थिति:** Squarespace हेल्प सेंटर दस्तावेज़ीकरण 7 सितंबर 2026 को समीक्षा किया गया था। कोई ग्राहक Squarespace साइट उपलब्ध नहीं थी। कोड इंजेक्शन और JavaScript कोड ब्लॉक्स के लिए योग्य योजनाओं की आवश्यकता होती है, कस्टम कोड Squarespace समर्थन के बाहर आता है, और Ajax लोडिंग इससे प्रभावित हो सकती है।
** SDK को लोड करने से पहले:** डैशबोर्ड → सेटिंग्स खोलें, अपने स्टोरफ्रंट ओरिजिन को Allowed Origins (CORS) में जोड़ें, और सहेजें पर क्लिक करें। प्रकाशित होस्टनेम और किसी भी प्रीव्यू या स्टेजिंग ओरिजिन को शामिल करें जिन्हें आप उपयोग करते हैं; कई ओरिजिन को कॉमा से अलग करें। कॉन्फ़िगरेशन के चरण देखें।
दायरा और पूर्वशर्तें#
यह पथ एक छोटे कैटलॉग के लिए सबसे व्यावहारिक है जिसमें स्थिर उत्पाद पेज हैं, या एक साइट जहाँ आप एक स्पष्ट उत्पाद-कोड डेटा लेयर को नियंत्रित करते हैं। आपको एक योग्य प्लान, साइट-मालिक एक्सेस, Shop ID, Publishable Key, और इम्पोर्ट किए गए ideal.house SKU की आवश्यकता है।
इस गाइड में Squarespace एक ideal.house एक्सटेंशन प्रदान नहीं करता है। इसका मानक उत्पाद एडिटर चयनित वेरिएंट SKU के लिए एक स्थिर सार्वजनिक JavaScript API की गारंटी नहीं देता है, इसलिए वेरिएंट-स्तर मैचिंग के लिए कस्टमर एडैप्टर कार्य आवश्यक है और हर टेम्पलेट पर व्यावहारिक नहीं हो सकता है।
न्यूनतम SDK अनुबंध#
<script
src="https://sdk.ideal.house/sdk.js"
data-shop-id="<SHOP_ID>"
data-publishable-key="<PUBLISHABLE_KEY>"
async
></script>
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
उत्पाद कोड को आयातित कैटलॉग sku से पूर्णतः मेल खाना चाहिए। कोड इंजेक्शन में Client Secret का उपयोग न करें।
लोडर इंस्टॉल करें#
वेबसाइट → पेज → कस्टम कोड → कोड इंजेक्शन खोलें (लेबल साइट संस्करण के अनुसार भिन्न हो सकता है)। SDK <script> को फुटर में पेस्ट करें, दोनों प्लेसहोल्डर बदलें, और सहेजें। फुटर इंजेक्शन </body> से पहले साइट पेजों पर चला जाता है; चेकआउट पेज इंजेक्टेड कोड का समर्थन नहीं करते।
लोडर को केवल एक बार इंस्टॉल करें। यदि कोई अन्य इंटीग्रेशन इसे पहले से जोड़ चुका है, तो डुप्लिकेट को हटाएं।
एक उत्पाद बटन रखें#
जहाँ पेज एडिटर JavaScript-सक्षम कोड ब्लॉक की अनुमति देता है, वहाँ रखें:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
उस विशिष्ट उत्पाद का SKU उपयोग करें। Squarespace 7.1 में, स्टोर/उत्पाद विवरण लेआउट प्राथमिक उत्पाद जानकारी क्षेत्र में मनमानी ब्लॉक स्वीकार नहीं कर सकते। एक व्यावहारिक विकल्प एक सामान्य लेआउट पेज है जिसमें एक उत्पाद ब्लॉक और एक पड़ोसी कोड ब्लॉक हो, प्रति उत्पाद एक जोड़ी। पुष्टि करें कि स्टोर पेज सक्षम रहता है क्योंकि उत्पाद ब्लॉक्स इस पर निर्भर करते हैं।
बड़े कैटलॉग के लिए, एक डेवलपर स्थिर, कस्टमर-स्वामित्व वाली मैपिंग जैसे URL पथ को SKU से मेल खाने के माध्यम से कंटेनर को इंजेक्ट कर सकता है:
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
URL मैपिंग, होस्ट इंसेशन, और नेविगेशन कॉलबैक ग्राहक कोड हैं। निजी Squarespace स्थिति को स्क्रैप न करें या इसकी संरचना स्थिर है इस मान लेते हुए काम न करें।
वेरिएंट्स, क्विक व्यू, और Ajax लोडिंग#
यदि एक Squarespace उत्पाद के कई वेरिएंट्स अलग ideal.house एसेट के साथ हैं, तो केवल तब बटन दिखाएं जब आपका एडैप्टर एक समर्थित स्रोत से चयनित वेरिएंट SKU की पहचान कर सके। हर परिवर्तन पर पुराने कंटेनर को एक साफ़ एक से बदलें। यदि कोई समर्थित चयन कॉलबैक/डेटा स्रोत मौजूद नहीं है, तो एक साझा उत्पाद-स्तर SKU का उपयोग केवल तब करें जब सभी वेरिएंट्स एक ही दृश्य एसेट को साझा करते हों, या बटन को छोड़ दें।
क्विक व्यू, उत्पाद ब्लॉक्स, और Ajax पेज लोडिंग पेज सामग्री को बदल सकती है। Squarespace चेतावनी देता है कि Ajax लोडिंग कस्टम कोड से टकराव कर सकती है। सटीक टेम्पलेट का परीक्षण करें; आवश्यकता होने पर, Ajax लोडिंग को अक्षम करें या renderForPath() को उस नेविगेशन तंत्र से कॉल करें जिसे आप स्वयं संभालते हैं। MutationObserver एक अंतिम उपाय के रूप में ग्राहक एडैप्टर है और इसे उत्पाद क्षेत्र तक सीमित किया जाना चाहिए।
उत्पाद डेटा इम्पोर्ट करें#
Squarespace उत्पाद/वेरिएंट SKU से ideal.house sku की एक तालिका बनाए रखें, फिर उत्पाद अपलोड का उपयोग करें। पूर्ण सार्वजनिक वर्कफ़्लो उत्पाद आयात करें, कार्य की स्थिति, उत्पादों की सूची देखें, उत्पाद अपडेट करें, उत्पाद हटाएँ, और त्रुटियाँ और पुनः प्रयास के तहत दस्तावेज़ीकृत है।
ब्राउज़र SDK Squarespace उत्पादों को सिंक नहीं करता है। कोई भी कॉमर्स API निर्यात, वेबहुक, या नियोजित कार्य ग्राहक-स्वामित्व वाला है।
सत्यापित करें और हटाएं#
प्रकाशित साइट का परीक्षण एक निजी विंडो में करें क्योंकि लॉग-इन किए गए संपादन कस्टम कोड को दबा सकते हैं। एक मैप किया गया उत्पाद, एक अनुपस्थित SKU, एक अज्ञात SKU, उत्पाद ब्लॉक्स, क्विक व्यू, Ajax नेविगेशन, ब्राउज़र बैक/फॉरवर्ड, मोबाइल लेआउट, कुकी सहमति, और चेकआउट अपवाद की जांच करें। एक सफल SDK अनुरोध और सटीक उत्पाद कोड/SKU समता की पुष्टि करें।
हटाने के लिए, फुटर इंजेक्शन और सभी कोड ब्लॉक्स/होस्ट/मैपिंग स्क्रिप्ट हटाएं, सहेजें, और कैश साफ़ करें। पुष्टि करें कि प्रकाशित पेज में कोई SDK अनुरोध या data-idealhouse-* तत्व नहीं है।