There is a site that I want to convert to an API with Kimono and it has the following structure (I mean visually, not markup-vise):
CATEGORY 1:
Product 1: PRICE
Product 2: PRICE
Product 3: PRICE
...
CATEGORY 2:
Product 1: PRICE
Product 2: PRICE
Product 3: PRICE
...
etc...
And I want the API to reflect that hierarchy, so it would be something like this:
{
"CATEGORY 1": {
"Product 1": {
"price": "$"
},
"Product 2": {
"price": "$"
},
"Product 3": {
"price": "$"
}
},
"CATEGORY 2": {
"Product 1": {
"price": "$"
},
"Product 2": {
"price": "$"
},
"Product 3": {
"price": "$"
}
}
}
The problem is that the site's markup doesn't show this hierarchy (Products aren't nested inside the Categories):
<h3>CATEGORY 1</h3>
<div class="product">
<div>
<div>
<h4>
<div>Product 1</div>
</h4>
<p>Price</p>
</div>
<div class="product">
<div>
<div>
<h4>
<div>Product 2</div>
</h4>
<p>Price</p>
</div>
<h3>CATEGORY 2</h3>
<div>
<div>
<div>
<h4>
<div>Product 1</div>
</h4>
<p>Price</p>
</div>
<div class="product">
<div>
<div>
<h4>
<div>Product 2</div>
</h4>
<p>Price</p>
</div>
No matter what I do, I always get something like this:
{
"collection1": [
{
"property1": "Category 1",
"property4": "Product 1",
"property5": "price"
},
{
"property1": "Category 2",
"property4": "Product 1",
"property5": "price"
}
]
}
Is it possible to achieve this?
If CSS selectors won't work probably it's possible if you will try regexp for CATEGORY 1, CATEGORY 2 - can't help more without knowing page url for testing
Also You can try to put Cat1, Cat2 data in different Collections, separated with
CSS:
...> h3
and regexp for middle part:
CATEGORY 1
Related
I am trying to make a simple webpage listing products for sale and I want the layout to be exactly like this site.
However, This is what I have been able to do so far. Please I need someone to assist me in making responsive columns like in the example site above. I am using bootstrap 5.2.3.
Thanks.
<template>
<div class="row row-cols-1 row-cols-md-3 g-4 my-2">
<div class="col" v-for="product in products" :key="product.id">
<router-link to="/">
<div class="card">
<img :src="product.img" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">{{product.title}}</h5>
<p class="card-text"> </p>
</div>
<div class="card-footer">
<small class="text-muted">
<span>₦</span> <strong>{{product.price}}</strong>
</small>
</div>
</div>
</router-link>
</div>
<script>
export default {
data(){
return{
products:[
{
id: 1,
title: "Mack Book",
price:300000,
description: "The latest Mack Book",
img: require ('../assets/laptop2.jpg')
},
{
id: 2,
title: "Lenovo",
price:190000,
description: "The latest Mack Book",
img: require ('../assets/laptop1.jpg')
},
{
id: 3,
title: "Product Name",
price:300000,
description: "The latest Mack Book",
img: require ('../assets/tv.jpg')
},
{
id: 4,
title: "Product Name",
price:500000,
description: "The latest Mack Book",
img: require ('../assets/laptop5.jpg')
},
{
id: 5,
title: "Product Name",
price:25000,
description: "The latest Mack Book",
img: require ('../assets/laptop1.jpg')
},
{
id: 6,
title: "Product Name",
price:3000,
description: "The latest Mack Book",
img: require ('../assets/tv3.jpg')
}
]
}
}
}
</script>
I have a few items inside a div that I can't seem to get to center horizontally using Tailwind - I think it's due to how I'm using flex?
<Row>
<div class={"flex items-center gap-6"}>
<div class="text-right">
<h1 class="text-4xl font-serif">
<em>Create</em> your account
</h1>
<p>We'll have you set up in a few short steps</p>
</div>
<div class="text-left">
<Form
data={{
name: {
label: "First Name",
type: "text",
required: true,
errorMessage: "Please enter your first name",
},
email: {
label: "Email",
type: "email",
required: true,
},
}}
/>
</div>
</div>
<div className="mt-4 text-center">
Already registered?{" "}
<Link
url="/signin"
className="text-pink-500 hover:text-pink-500 visited:text-pink-500"
text="Sign In"
/>
</div>
</Row>
Here's how it looks - the space on the right shouldn't be there
So I am able to have four columns in single item at a time , but when I implement 'carousel' class (4th div in html file) then the first two item displays fine. But in the last item as it should only have 2 columns with task name 9 and 10, instead task name 1 and 5 are also displayed there.
if I don't implement carousel class then data displays fine but carousel buttons stops working.
' I've already tried different solutions provided on stack overflow. '
here is my HTML file
<!-- my tasks -->
<div class="row mt-3 mb-3">
<div class="col-md-12">
<!-- carousel -->
<div class="row mx-auto my-auto">
<div id="myTaskDiv" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100">
<!-- carousel item -->
<div class="carousel-item {{ i == 0 ? 'active' : '' }}" *ngFor="let chunkMyTask of productData ;let i =index;">
<!--widget-->
<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let myTask of chunkMyTask">
<div class="widget border">
<div class="widget-body">
{{myTask.name}}
</div>
</div>
<!--widget end-->
</div>
<!-- carousel item end-->
</div>
</div>
<!-- carousel controls -->
<a class="carousel-control-prev" role="button" href="#myTaskDiv" data-slide="prev">
<i class="fa fa-angle-left fa-3x" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button" href="#myTaskDiv" data-slide="next">
<i class="fa fa-angle-right fa-3x" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
<!-- carousel controls end-->
</div>
<!-- carousel end -->
</div>
</div>
<!-- my tasks end-->
then this below is my .ts file
import { Component, OnInit } from '#angular/core';
import { task } from '../task';
import { TasksService } from '../tasks.service';
import { MyTaskServiceService } from 'src/app/dashboard/my-tasks/my-task-service.service';
#Component({
selector: 'app-my-tasks',
templateUrl: './my-tasks.component.html',
styleUrls: ['./my-tasks.component.css']
export class MyTasksComponent {
title = 'Carousel';
productData: any;
private myTasks: any;
private myTaskArray: any;
constructor(private myTaskService: MyTaskServiceService) { }
chunks(array, size) {
let results :any;
results = [];
while (array.length) {
results.push(array.splice(0, size));
this.num=this.num+1;
}
return results;
}
ngOnInit() {
this.myTaskService.get_New_Products().subscribe(
data => {
this.productData = this.chunks(data.json(), 4);
console.log(this.productData);
});
}
}
And at last this below is my json file:
[
{
"taskType": "myTask",
"name": "Task 1"
},
{
"taskType": "myTask",
"name": "Task 2"
},
{
"taskType": "myTask",
"name": "Task 3"
},
{
"taskType": "myTask",
"name": "Task 4"
},
{
"taskType": "myTask",
"name": "Task 5"
},
{
"taskType": "myTask",
"name": "Task 6"
},
{
"taskType": "myTask",
"name": "Task 7"
},
{
"taskType": "myTask",
"name": "Task 8"
},
{
"taskType": "myTask",
"name": "Task 9"
},
{
"taskType": "myTask",
"name": "Task 10"
}
]
I am using angularjs and bootstrap3. I have array of array of objects and I need to display it in the UI like below,
sample = [
{
"id": 12,
"title": "title2",
"description": "description2_for the second"
},
{
"id": 13,
"title": "title3",
"description": "description3"
},
{
"id": 17,
"title": "title4",
"description": "description4"
},
{
"id": 18,
"title": "title5",
"description": "description5"
},
{
"id": 19,
"title": "title6",
"description": "description6"
},
{
"id": 20,
"title": "title7",
"description": "description7"
},
{
"id": 21,
"title": "title8",
"description": "description8"
},
{
"id": 22,
"title": "title9",
"description": "description9"
}
]
my code ng-repeat look like,
<div class="editor-preview">
<div class="row" >
<div class="col-md-4 " ng-repeat-start="i in sample track by $index">
<div class="tooltip"><button type="button" class="btn btn-primary btn-round-lg btn-lg">{{i.title}}</button>
<span class="tooltiptext">{{i.description}}</span>
</div>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
From the above code, UI is looking like below image.
But, I want to show the UI like the below image and 3 buttons per row
How to show the UI like above image in bootstrap css dynamically for alternative rows too
You can use list-inline for this layout:
http://jsfiddle.net/hstppbj8/804/
HTML:
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li ng-repeat="i in sample track by $index"><button class="btn btn-sm btn-primary">
{{i.title}}<span class="tooltiptext"> {{i.description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>
CSS:
ul li {
margin: 4px 0; /*For spacing between li*/
}
Resize the jsfiddle window to see the layout properly.
try to have the text for the content to be different ( some are longer, some are much longer ) for each of the button. It should be prolonged as the class ".btn" css has {display: inline-block} in them. Then make sure there is a wrapper around these buttons and make them { text-align: center }
In angular 1 ng-repeat has been used. But in ng-5 this syntax has been changed with ng-for. I would suggest you to please use the ng-for to use the angular loop. in that case Your code will be like the following.
<div ng-controller="sample">
<div class="editor-preview-testimonials">
<div class="row">
<div class="col-xs-10">
<ul class="list-inline text-center">
<li *ngFor="let item of items; let i = index""><button class="btn btn-sm btn-primary">
<span class="tooltiptext"> {{i}} {{description}}</span>
</button></li>
</ul>
</div>
<div class="clearfix" ng-if="($index+1)%3==0"></div>
</div>
</div>
</div>
I am displaying template to show it on monitor.
I have designed layout like this:
But I want to display like this (to save the space):
My code looks like this :
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.businessObject =
[
{
CompanyName: "AA",
StockWaringItemsCount: 0,
Items: [
{
ToolNumber: "200", ItemName: "Item 1 GREY", UOM: "PCs", MinStockLevel: 100, Stock: 5000
}
]
},
{
CompanyName: "BB",
StockWaringItemsCount: 1,
Items: [
{ ToolNumber: "111", ItemName: "Item 1", UOM: "", MinStockLevel: 200, Stock: 150 },
{ ToolNumber: "222", ItemName: "Item 2", UOM: "", MinStockLevel: 300, Stock: 400 },
{ ToolNumber: "333", ItemName: "Item 3", UOM: "", MinStockLevel: 400, Stock: 200 },
]
},
{
CompanyName: "AutoLive",
StockWaringItemsCount: 1000,
Items: [
{ ToolNumber: "111", ItemName: "Item 222", UOM: "", MinStockLevel: 500, Stock: 5000 },
{ ToolNumber: "222", ItemName: "Item 444", UOM: "", MinStockLevel: 600, Stock: 5000 },
{ ToolNumber: "333", ItemName: "Item 252", UOM: "", MinStockLevel: 700, Stock: 5000},
]
}
];
});
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body ng-controller="myCtrl">
<div class="container">
<div ng-repeat="company in businessObject" class="col-sm-12 col-md-6 col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
{{company.CompanyShortID}}
<div class="pull-right">
<div ng-show="company.StockWarnigItemsCount>0">
<span class="badge" style="color: Red">{{company.StockWarnigItemsCount}}</span>
</div>
<span class="glyphicon glyphicon-ok-circle" ng-show="company.StockWarnigItemsCount===0">
</span>
</div>
<div class="clearfix">
</div>
</div>
<div class="panel-body">
<table class="table table-condensed" style="margin-bottom: 0px;">
<thead>
<tr>
<th>
Tool
</th>
<th style="width: 60%">
Item
</th>
<th style="text-align: center">
Min
</th>
<th style="text-align: center">
Stock
</th>
<th style="text-align: center">
Status
</th>
</tr>
</thead>
<tr ng-repeat="item in company.Items">
<td>
{{item.ToolNumber}}
</td>
<td>
{{item.ItemName}}
</td>
<td style="text-align: right">
{{item.MinStockLevel}}
</td>
<td style="text-align: right">
{{item.Stock}}
</td>
<td style="text-align: center">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
i am using angularjs with bootstrap.
Any help would be greatly appreciated.
Add float: left to the CSS of these elements.
However, it will still depend on the order of the elements if they will appear the way you showed it (you might have to change the order - in this case the order is top let, lower left, topright, lower right)
removed ng-repeat.
I have used masonry jquery. appended items dynamically(as mentioned in masonry document). Now it is working perfectly fine!..