Skip to content
This repository was archived by the owner on Mar 6, 2024. It is now read-only.

product page #10

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

product page #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dabe35a
product page
AgaK-O Feb 5, 2021
b9f6777
product page with customUrl option
AgaK-O Feb 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ header a {
align-items:center;
background:transparent;
font-size:0.8em;
margin-left:auto;
/*margin-left:auto;*/
margin-right:5px;
white-space: nowrap;
}
Expand Down
60 changes: 37 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@
<img src='https://www.tipser.com/523e894dc43c43f278bb4211a4430285.png' alt="Tipser" />
</a>
<ul class="horizontal-menu">
<li class="horizontal-item">
<a class="link" href="/">
Home
</a>
</li>
<li class="horizontal-item">
<a class="link" href="/product?productId=5c6ff65d75afb80001816edc">
Product
</a>
</li>
<li class="horizontal-item">
<a class="link" href="https://tipser.github.io/docs/#tipser-elements" target="_blank"
rel="noopener noreferrer">
Expand All @@ -33,44 +43,46 @@
</li>

</ul>
<div id="cart"></div>
<a class="side-note" href="https://www.tipser.com/tipser-elements">Tipser &#128640;
</a>
</nav>

</header>

<!-- This is the element where we want to put Tipser cart icon (referred to with CSS selector in mountCart function) -->
<div id="cart"></div>

<div class="content-root"></div>

<h2 class="heading">Product</h2>
<!-- This is a marker element for tipser product, given tipser product id -->
<div data-tipser-pid="5c6ff65d75afb80001816edc"></div>
<section id="root">

<h2 class="heading">Product compact</h2>
<!-- This is a marker element for tipser product with compact mode enabled, given tipser product id -->
<div data-tipser-pid="59083a8f60689325d8727ad9" data-tipser-view="compact"></div>
<h2 class="heading">Product</h2>
<!-- This is a marker element for tipser product, given tipser product id -->
<div data-tipser-pid="5c6ff65d75afb80001816edc"></div>

<h2 class='heading'>Collection</h2>
<!-- This is a marker element for tipser Collection, given tipser collection id -->
<h2 class="heading">Product compact</h2>
<!-- This is a marker element for tipser product with compact mode enabled, given tipser product id -->
<div data-tipser-pid="59083a8f60689325d8727ad9" data-tipser-view="compact"></div>

<div data-tipser-cid="5cf51fec561f17000129fcb7"><a
href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>
<h2 class='heading'>Collection</h2>
<!-- This is a marker element for tipser Collection, given tipser collection id -->

<div data-tipser-cid="5cf51fec561f17000129fcb7"><a
href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>

<!-- This is a marker element for tipser Collection with carousel -->
<h2 class="heading">Collection with carousel</h2>
<div data-tipser-cid="5b9665929d25800a1c9b6b34" data-tipser-carousel><a
href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>

<h2 class="heading">Store</h2>
<!-- This is a marker element for tipser shop -->
<div id="tipser_shop"></div>
<!-- This is a marker element for tipser Collection with carousel -->
<h2 class="heading">Collection with carousel</h2>
<div data-tipser-cid="5b9665929d25800a1c9b6b34" data-tipser-carousel><a
href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>

<h2 class="heading">Store</h2>
<!-- This is a marker element for tipser shop -->
<div id="tipser_shop"></div>
</section>

<script>
var scriptTag = document.createElement('script');
scriptTag.src = "https://cdn.tipser.com/tipser-script/latest.js";
scriptTag.src = "https://cdn.tipser.com/tipser-script/dev.js";
// in case you want to load local dev version of script
// scriptTag.src = "http://127.0.0.1:5001/Script-tipser-elements.js";

Expand All @@ -79,8 +91,10 @@ <h2 class="heading">Store</h2>
//The configuration of tipser widget comes here
env: "prod",
lang: "sv-SE",
openOldDialog: true,

openOldDialog: false,
customUrls: {
productBaseUrl: (productId) => `/product?productId=${productId}`,
},
eventsHandlers: {
onError: function (error) {
console.error(error)
Expand Down Expand Up @@ -113,4 +127,4 @@ <h2 class="heading">Store</h2>

</body>

</html>
</html>
73 changes: 73 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
// Components
const HomePage = {
render: () => {
return `
<h2 class="heading">Product</h2>
<!-- This is a marker element for tipser product, given tipser product id -->
<div data-tipser-pid="5c6ff65d75afb80001816edc"></div>

<h2 class="heading">Product compact</h2>
<!-- This is a marker element for tipser product with compact mode enabled, given tipser product id -->
<div data-tipser-pid="59083a8f60689325d8727ad9" data-tipser-view="compact"></div>

<h2 class='heading'>Collection</h2>
<!-- This is a marker element for tipser Collection, given tipser collection id -->

<div data-tipser-cid="5cf51fec561f17000129fcb7"><a
href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>


<!-- This is a marker element for tipser Collection with carousel -->
<h2 class="heading">Collection with carousel</h2>
<div data-tipser-cid="5b9665929d25800a1c9b6b34" data-tipser-carousel><a
href="https://www.tipser.com:443/shops/tipser/shoes"></a>SHOES</a> </div>

<h2 class="heading">Store</h2>
<!-- This is a marker element for tipser shop -->
<div id="tipser_shop"></div>
`;
}
}
const ProductPage = {
render: () => {
return `
<h2>Product Page</h2>
<div data-tipser-product-page="5bc6e1c7df2ac60001158814"></div>
`;
}
};

const ErrorComponent = {
render: () => {
return `
<section>
<h1>Error</h1>
</section>
`;
}
};

// Routes
const routes = [
{ path: '/', component: HomePage, },
{ path: '/product', component: ProductPage, },
];

const parseLocation = () => location.hash.slice(1).toLowerCase() || '/';
const findComponentByPath = (path, routes) => routes.find(r => r.path.match(new RegExp(`^\\${path}$`, 'gm'))) || undefined;

const router = () => {
// Find the component based on the current path
const path = parseLocation();
console.log({path});
// If there's no matching route, get the "Error" component
const { component = ErrorComponent } = findComponentByPath(path, routes) || {};
// Render the component in the "app" placeholder
document.getElementById('root').innerHTML = component.render();
};

const log = () => {
console.log('hash')
}
window.addEventListener('hashchange', router);
window.addEventListener('load', router);
111 changes: 111 additions & 0 deletions product/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Oswald&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../header.css">
<link rel="stylesheet" href="../index.css">
<link rel="stylesheet" href="../tipser-elements-adjustments.css">
<link rel="stylesheet" href="../footer.css">

</head>

<body>

<header class="header">
<nav class="navigation">
<a class="te-logo" href="https://www.tipser.com/">
<img src='https://www.tipser.com/523e894dc43c43f278bb4211a4430285.png' alt="Tipser" />
</a>
<ul class="horizontal-menu">
<li class="horizontal-item">
<a class="link" href="/">
Home
</a>
</li>
<li class="horizontal-item">
<a class="link" href="/product?productId=5c6ff65d75afb80001816edc">
Product
</a>
</li>
<li class="horizontal-item">
<a class="link" href="https://tipser.github.io/docs/#tipser-elements" target="_blank"
rel="noopener noreferrer">
Documentation
</a>
</li>
<li class="horizontal-item">
<a class="link" href="https://github.com/Tipser/tipser-widget-bootstrap" target="_blank"
rel="noopener noreferrer">
GitHub repo
</a>
</li>

</ul>
<div id="cart"></div>
<a class="side-note" href="https://www.tipser.com/tipser-elements">Tipser &#128640;
</a>
</nav>

</header>

<div id="content-root">
<h2 class="heading">Product Page</h2>
</div>

<script>
var scriptTag = document.createElement('script');
scriptTag.src = "https://cdn.tipser.com/tipser-script/latest.js";
// in case you want to load local dev version of script
// scriptTag.src = "http://127.0.0.1:5001/Script-tipser-elements.js";

scriptTag.onload = scriptTag.onreadystatechange = function () {
tipser.elements('59e86b79b8f3f60a94ecd26a', { //pos id (Tipser user id)
//The configuration of tipser widget comes here
env: "prod",
lang: "sv-SE",
openOldDialog: false,
customUrls: {
productBaseUrl: (productId) => `/product?productId=${productId}`,
},
eventsHandlers: {
onError: function (error) {
console.error(error)
},
onAddToCart: function (options) {
console.log('Hurray, you have added item to cart. ', options.product);
console.log('Your cart size is now. ', options.cartSize);
}
}
})

.mountCart('#cart') //inserting Tipser cart to the HTML
};
document.body.appendChild(scriptTag);
</script>
<script>
// Reading productId from query string
const productId = window.location.search.substring(1).split("=")[1];
const productElement = document.createElement('div');
productElement.setAttribute('data-tipser-product-page', productId);
document.getElementById('content-root').appendChild(productElement);
</script>

<div class="footer-terms">
<div class="footer-logo"><a href="/" class="tipser-logo">
<img src="https://www.tipser.com/523e894dc43c43f278bb4211a4430285.png" alt="">
</a>
</div>
<div class="footer-links ">
<a href="https://www.tipser.com/terms" target="_blank" class="footer-link">Conditions of Use and Sale</a>
<a href="https://www.tipser.com/terms-privacy" target="_blank" class="footer-link">Privacy notice</a>
<a href="https://www.tipser.com/imprint" target="_blank" class="footer-link">Imprint</a>
<a href="https://www.tipser.com/terms-cookies" target="_blank" class="footer-link">Cookies &amp; Analytics</a>
</div>
<div class="footer-copyrights">© 2011 - 2019, Tipser AB</div>
</div>

</body>

</html>
11 changes: 3 additions & 8 deletions tipser-elements-adjustments.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
#cart {
position: fixed;
top: 121px;
background: #fff;
padding: 10px;
box-shadow: -2px 2px 7px rgba(0,0,0,0.3);
z-index: 10;
margin: 0 20px 0 auto;
}

.cart-icon .tipser-icon.tipser-icon-cart {
font-size: 35px;
}

#cart .cart-icon .tipser-icon .tipser-cart-size-indicator {
width: 25px;
height: 25px;
width: 20px;
height: 20px;
top: 50%;
border: 2px solid #cacaca;
border-radius: 50%;
Expand Down