685 comments found.
Hi. I bought Gogo template last week. I am attempting to develop a custom sidebar in ReactJS. I can’t find the way to customize ”/constant/menu.js” to the sidebar component starts hidden.
Hi,
You may set “defaultMenuType” to “menu-hidden” in src/constants/defaultValues.js file.
Hello, I purchased your item but I really need a nice landing page for my project. https://gogo-react-web.coloredstrategies.com/ is exactly what I;m looking for. Would you be able to provide it?
Thanks, Francesco
Hi Francesco,
We would like to provide it but it is built with html/jquery. If you are still interested, please reach us via the contact form at our profile page. https://themeforest.net/user/coloredstrategies.
Hi, what is the best way to temporary disable the right-click function in the thumb list? https://gogo-react.coloredstrategies.com/app/pages/product/thumb-list
thanks
Hi,
You may render it conditionally with a state property.
{
this.state.showContextMenu &&
<ContextMenuContainer
onContextMenuClick={this.onContextMenuClick}
onContextMenu={this.onContextMenu}
/>
}
Can I switch to top bar for menus
Hi.
I want to remove the dollar character from the single slider. And also want to make the sliding with steps of 500. Is that posible?
Hi,
You may add an attribute called “step”. You may find other properties and settings at https://github.com/react-component/slider. Implementation is below.
<SliderTooltip
min={0}
max={2500}
defaultValue={1000}
className="mb-5"
step={500}
/>
$ sign is added at “src/components/common/SliderTooltip.js” file. You may find it return part of sliderHandle component.
All the best.
thanks! 
Hello, I am looking at the Gogo template and wanted to reach out with a few questions.
I love that this is built with React and Firebase. I have a project I want to build and am wondering if this will handle what I am looking to do.
I want to build an anonymous form submission for non-profits. This will form will have a backend dashboard for staff to review data that has been submitted. The additional features in your Gogo template are a bonus for the staff. The form submission will be generated anonymously by members of the non-profit.
My question is – Can I have a form showing for submission and this data shows in the dashboard? Can I have different roles and permissions for members to view only the form page, while staff can view all of the admin areas?
Can this template – with the form only, be generated as a react native mobile app?
I’d be happy to talk more with you about specifics – or even consider hiring you to help me build this out.
Thank you for your time.
Jordan Lee
Hi Jodan Lee,
- You may define a route which is not password protected to get form submissions. There are currently 3 different main routes for the project. app, user and error.
- Unfortunately, different user roles are not implemented in the project. It’s in our todo list but can’t provide a realistic ETA.
- My knowledge about React Native is a year old and changes might be made, but as far as I know it would not be any good creating an app from the project. Implementing the form at the React Native side would be more convenient with the “native” feeling. It should be possible to include the form as an iframe via WebWiev though.
- Unfortunately, we don’t accept any freelance work.
Have a good one,
Arthur.
Hello, great template… I am finding it really hard to edit text for example I’ve tried editing what is appearing as Default in the Dashboards and what is now showing is menu.thetextIwrote… Where do I get the text that is showing or how do I edit what is appearing without getting that error? Thought you guys should mention it in your docs… It’s the most basic thing…
Then what’s the process of changing the font?
Hi,
You are right about the language. We should have included it at the docs but after implementing a library and working with it for several months, we start to assume everybody should have the knowledge. Of course this assumption is quite faulty. We try to make additions to our docs occasionally by user feedbacks and create guides for the requested subjects though.
As for the question, you may find the entries at “src/lang/locales/en_US.js” and “src/lang/locales/es_ES.js” files.
You may change the font by searching and replacing below line at “src/assets/css/sass/_gogo.style.scss” file.
"Nunito", sans-serif
All the best.
Okay, the same applies to the font size?
Unfortunately not. There are lots of font-size definitions in the same Sass file to override default ones from libraries like Bootstrap and so on. Changing “body” and “p” covers most of it.
So how can I apply a new font size in the whole template?
Then also the rounded corners, how do I activate or de-activate it?
Rather, If I would love to make the border radius permanent how do I go about it?
You may add “rounded” class to body of the “public/index.html” file and remove “changeRadius” function and calls to it in “src/components/common/ColorSwitcher.js” file. You may also need to remove “__theme_radius” definition from localStorage of the browser or test the result in an incognito window.
As I stated earlier, there are lots of different font sizes defined in the project for different elements. Eg: headings, paragraph, buttons, labels, lead texts, icons and so on. There is not a way to appyl a new font size for the whole template.
All the best.
Awesome, thanks so much for answering each and every question, One last thing, how can I add the cart functionality and checkout to the ecommerce section?
No problem, happy to help.
I am not sure how to answer this one but I will provide a guidence as much as I can.
First of all, we have not included chart logic in the template since we believe it belongs to frontend and I don’t think we will do it in future updates.
You may work on the top right notification button and its dropdown to create a cart layout. You may also use the Right Modal for something little bit different. I believe we have included all the related components for checkout. You may find them at UI/Forms part. I don’t know if there are any plugins to provide the logic but it should be possible creating the logic by vuex.
All the best.
Hey folks,
if it happens that you have an issue with React Autosuggest, i had to remove ( or comment ) these lines under src/components/common/ReactAutoSuggest.js
export default class ReactAutoSuggest extends React.Component {
constructor(props) {
super(props);
this.state = {
value: this.props.value,
suggestions: [],
data: this.props.data || []
};
}
static getDerivedStateFromProps(props, state) {
return {value: props.value}
}
...
}
export default class ReactAutoSuggest extends React.Component {
constructor(props) {
super(props);
this.state = {
value: this.props.value,
suggestions: [],
data: this.props.data || []
};
}
/***** GET RID OF THIS PART HERE
static getDerivedStateFromProps(props, state) {
return {value: props.value}
}
*********/
...
}
Hi,
Thanks for taking your time and reaching us. We had this problem fixed with latest update.
All the best.
Hi there, can you please tell me if the theme is wcag compliant?
Hi,
We have tried to include accessibility requirements but I can not say it is WCAG compliant. I am quite sure that we have skipped some rules.
All the best.
Can you please give a more detailed report of what has been implemented on that regard? Which are those rules that are lacking? FYI we’ve bought the theme (with my company’s account) and we are planning to use, but WCAG is a requirement. Thanks for you prompt answer.
Unfortunately, we have not taken the spec in consideration at development so I can not provide a certain report. We have implemented(mostly) some of them as a best practice. Eg: image alt tags, label for values, title, semantic tags and so on. Safest approach would be checking the rules while working on the project.
hi this is a very good theme and you did the best effort i ever seen but let me ask you how to show and hide loading on the screen ?
Hi,
It is nice to hear that you like the template, we really appreciate it.
As for your question, you may search for the term className=”loading” and this will reveal that on every step of the routing we have included it. Reasone for this is that the project works with code splitting so it loads the pages async.
You may remove all className=”loading” from the project and public/index.html file or simply add an “opacity:0” to ”.loading” class in “src/assets/css/sass/_gogo.style.scss” file. The class is very close to /* 35.Loading */ title.
All the best.
Hi,my question is how can i change to typescript?thanks
Hi,
Unfortunately, I don’t think it’s practical or even possible to change the template to typescript at this point.
All the best.
Hello,
I having issue regarding datatable search only one input globally instead of individual column search. For example, I would like to search for country where people age is 33 and salary of $200, so it will be something like this “Tokyo 33 200. Please check this example https://mdbootstrap.com/docs/react/tables/datatables/
also i need complete functionally like bootstrap datatable js
Hi,
You may find search implemented at https://dore-jquery.coloredstrategies.com/Ui.Datatables.Rows.html by searching for something like this: “cake dessert 36”
It searches all the table with below line which is located at dore.scripts.js under datatables section
$dataTableRows.search($(this).val()).draw();
Hello! It is possible to change the height of header and footer to a more thin layout, without broken the template?
Hi,
It is surely possible but there is not any out of the box solution, you will need to work on scss file to achive it.
Great theme and doc.
Hi,
It’s nice to hear you like the template.
We got the email notifcation with an issue about scss and I guess you have solved the issue since comment does not contain the problem. If not let us know.
All the best.
Hello
Please i dont want to use firebase , how to disable it. ?
Hi,
You should check “src/redux/auth/saga.js” file and adjust methods for your own needs instead of using “auth” from Firebase.
I already do that , I’m using axios with mongodb but i still got request to firebase
I change firebase config to null, but the projet crashed
https://scrn.li/MuhdVUVrt3uJMzPlease try removing “import ’./helpers/Firebase’” from src/App.js and “import { auth } from ’../../helpers/Firebase’;” from src/redux/auth/saga.js.
You may also delete this file after removing imports. Then it should stop connecting to Firebase.
Thank you
Hello
I would like to use Sortable on SurveyListItem. here is my code . Nb: I rename SurveyListItem to TemplateContentBuilder
handleSortChange(order, sortable, evt) {
var contents = mapOrder(this.state.template.contents, order, "id");
this.setState({ template: { ...this.state.template, contents: contents } });
}
render() {
const { template } = this.state;
const { categoryItems, loading } = this.props;
return (
<Fragment>
<Formik
validate={this.validate}
initialValues={{
name: "",
category: "",
description: ""
}}
onSubmit={this.handleSubmit}
render={({ errors, touched, isValidating, handleSubmit, handleBlur }) => (
<Form className="av-tooltip tooltip-label-right">
<Row className="survey-app">
<Colxx xxs="12">
<h1>
{/* <i classname="simple-icon-refresh heading-icon" />{" "} */}
<span classname="align-middle d-inline-block pt-1">
{template.name ? template.name : (
<IntlMessages id="template.details.title" />
)}
</span>
</h1>
<div classname="text-zero top-right-button-container">
{loading && (<ButtonDropdown
className="top-right-button top-right-button-single"
isOpen={this.state.dropdownSplitOpen}
toggle={this.toggleSplit}>
<Button
// outline
className="top-right-button"
size="lg"
color="primary"
onClick={handleSubmit}
>
<IntlMessages id="template.btn.edit" />
</Button>
</ButtonDropdown>
)}
</div>
<Breadcrumb match={this.props.match} />
{loading ? (
<Fragment>
<Nav tabs className="separator-tabs ml-0 mb-5">
<NavItem>
<NavLink
className={classnames({
active: this.state.activeFirstTab === "1",
"nav-link": true
})}
onClick={() => {
this.toggleTab("1");
}}
to="#">
<IntlMessages id="template.tab.template.title" />
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({
active: this.state.activeFirstTab === "2",
"nav-link": true
})}
onClick={() => {
this.toggleTab("2");
}}
to="#">
<IntlMessages id="template.tab.preview.title" />
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeFirstTab}>
<TabPane tabId="1">
<Row>
<Colxx xxs="12" lg="4" className="mb-4">
<Card>
<CardBody>
<h6 classname="mb-4">
<IntlMessages id="template.list.title" />
</h6>
<FormGroup>
<Label>
<IntlMessages id="template.field.name" />
</Label>
<Input className="form-control" name="name"
value={template.name}
onBlur={handleBlur}
onChange={(e) => {
this.setState({ template: { ...this.state.template, name: e.target.value } });
}}
/>
{errors.name && touched.name && <div classname="invalid-feedback d-block">{errors.name}</div>}
</FormGroup>
<FormGroup>
<Label>
<IntlMessages id="template.field.category" />
</Label>
<Select
components={{ Input: CustomSelectInput }}
className="react-select"
classNamePrefix="react-select"
name="category"
options={categoryItems ?
categoryItems.map((x, i) => {
return { label: x.nom, value: x._id, key: x._id };
}) : []}
value={template.category}
// onBlur={handleBlur}
onChange={val => {
this.setState({ template: { ...this.state.template, category: val } });
}}
/>
{errors.category && touched.category && <div classname="invalid-feedback d-block">{errors.email}</div>}
</FormGroup>
<FormGroup>
<Label>
<IntlMessages id="template.field.description" />
</Label>
<Input
className="form-control"
name="description"
type="textarea"
onBlur={handleBlur}
value={template.description}
rows="8"
onChange={e => {
this.setState({ template: { ...this.state.template, description: e.target.value } });
}}
/>
{errors.details && touched.details ? (
<div classname="invalid-feedback d-block">
{errors.details}
</div>
) : null}
</FormGroup>
</CardBody>
</Card>
</Colxx>
<Colxx xxs="12" lg="8">
<Sortable
tag="ul"
className="list-unstyled mb-4"
options={{
handle: ".handle"
}}
onChange={this.handleSortChange}
>
{/* <ul classname="list-unstyled mb-4"> */}
{template.contents.map((item, index) => {
return (
<li key="{item.id}">
<TemplateContentBuilder
order={index}
{...item}
expanded={!item.title && true}
updateClick={(id, item) => {
this.updateQuestion(id, item);
}}
deleteClick={id => {
this.deleteQuestion(id);
}} />
</li>
);
})}
{/* </ul> */}
</Sortable>
<div classname="text-center">
<Button
outline
color="primary"
className="mt-3"
onClick={() => this.addQuestion()}>
<i classname="simple-icon-plus btn-group-icon" />{" "}{" "}
<IntlMessages id="template.btn.add_content" />
</Button>
</div>
</Colxx>
</Row>
</TabPane>
<TabPane tabId="2">
<Row>
<TemplatePreview contents={this.state.template.contents} />
</Row>
</TabPane>
</TabContent>
</Fragment>
) : (
<div classname="loading" />
)}
</Colxx>
</Row>
</Form>
)}
/>
</Fragment >
);
}
Hi,
Using it as below seems to be working. Although, please be warned that it might cause some problems if you implement a pagination.
{loading ? (
<Sortable className="row">
{surveyItems.map((item, index) => {
return (
<SurveyListItem
key={`todo_item_${index}`}
item={item}
handleCheckChange={this.handleCheckChange}
isSelected={
loading ? selectedItems.includes(item.id) : false
}
/>
);
})}
</Sortable>
) : (
<div classname="loading" />
)}
In the ApplicationMenu.js Component, please explain the use of (...params) in “constructor(...params){ super(...params);”?? I have only ever passed (props) i.e., constructor(props) {super(props);
Hi,
I think there is nothing special about it and I am not sure why we even did it. I have not even realized it until now. Removed spread operator and it works normally. Please ignore it.
Got it. Thank you for your reply.
Theme not working on Internet Explorer. Just coming white page. Any solution?
Hi,
Unfortunately the template does not support IE.
Below is the supported browsers whcih may also be found at detail page of the template.
Compatible Browsers Firefox, Safari, Opera, Chrome, Edge
All the best.
It should support all major browsers. Also my account using Internet Explorer 11. They are government agency. I can’t just say them “please distribute new browser to all machines”
Also technical specifications are forcing me…
You are right, it should support IE in your case but we choose not to like majority of react template authors.
Envato provides us the option to support browsers or not so we have decided to spend our time on improving the template rather than working on IE.
If we have claimed to support it in our template details and actually don’t do it, that would be a problem. In that case Envato would probably remove our template.
Some of our users implemented IE support themselves as far as we heard from them, you may decide to do so as well.
All the best.
Hi,
The src/components/DatatablePagination.js is missing a number limit.
I have this result in my ReactTable. see > http://prntscr.com/qbhcx3 Is there a quick fix?
Hi,
There is not a out of the box solution for it as you may see Reactstrap does not provide a limit logic yet.https://reactstrap.github.io/components/pagination/
We can work on it and get back to you in couple of days.
in the meanwhile, i made this child component.
import DataTablePagination from ”./DatatablePagination”; import { DropdownItem, DropdownMenu, DropdownToggle, Pagination, PaginationItem, PaginationLink, UncontrolledDropdown } from “reactstrap”; import React, {Fragment} from “react”;
export default class DataTablePaginationLimit extends DataTablePagination { renderPages() { let pageCount = this.props.pages; let startPage = 0; let pageLimit = 10; if (pageCount > pageLimit) { startPage = this.state.page – (pageLimit / 2); pageCount = this.state.page + (pageLimit / 2); }
if (startPage < 0) {
startPage = 0;
}
}if (pageCount < 10) {
pageCount = 10;
}
}
let pageButtons = [];if (pageCount > this.props.pages) {
pageCount = this.props.pages;
startPage = this.props.pages - 10;
}for (let i = startPage; i < pageCount; i++) {
let active = this.state.page === i ? true : false;
pageButtons.push(
<PaginationItem key={i} active={active}>
<PaginationLink
onClick={() => this.pageClick(i)}
>{i + 1}</PaginationLink>
</PaginationItem>
);
}
return pageButtons;render() {
const {
page,
pages,
canPrevious,
canNext,
pageSizeOptions,
showPageSizeOptions,
showPageJump
} = this.props;
}return (
<Fragment>
{
showPageJump &&
Page
<UncontrolledDropdown className="d-inline-block">
<DropdownToggle caret color="outline-primary" size="xs">
{this.state.page + 1}
</DropdownToggle>
<DropdownMenu direction="left">
{this.renderPageJump()}
</DropdownMenu>
</UncontrolledDropdown>
of {pages}
}
);<Pagination className="d-inline-block" size="sm" listClassName="justify-content-center"
aria-label="Page navigation example">
<PaginationItem className={`${!canPrevious && "disabled"}`}>
<PaginationLink
className={"prev"}
onClick={() => {
if (!canPrevious) return;
this.changePage(0);
}}
disabled={!canPrevious}>
</PaginationLink>
</PaginationItem>
</Fragment>This looks nice and I guess it gets the job done.
It might be a problem if limit is not an even number but since you define it in the method it would not be a problem. Giving the limit an odd number and centering current one would look better though, like Angular implementation of Bootstrap. Here is their pagination: https://valor-software.com/ngx-bootstrap/#/pagination#pagination-limit
And here is the logic if you want to take a look. At this point it would be more practiacal for you to choose to implement it or not instead of waiting for our update: https://github.com/valor-software/ngx-bootstrap/blob/development/src/pagination/pager.component.ts#L229
Note: “rotate” property is used for centering.
Thank you for the tips and example.
i changed the renderPages and now the current page is always in the middle.
renderPages() { let totalPages = this.props.pages; let endPage = this.props.pages; let currentPage = this.state.page;
let startPage = 0;
let maxSize = this.props.maxSize;
if(!(maxSize % 5 == 0)){
maxSize = maxSize + 1;
}
if (endPage > maxSize ) {
startPage = Math.max(currentPage - Math.floor(maxSize / 2), -1) + 1;
endPage = startPage + maxSize - 1;
}if (startPage < 0) {
startPage = 0;
}
}
let pageButtons = [];if (endPage < maxSize ) {
endPage = maxSize ;
}if (endPage > totalPages) {
endPage = totalPages;
startPage = endPage - maxSize + 1;
}for (let i = startPage; i < endPage; i++) {
let active = currentPage === i ? true : false;
pageButtons.push(
<PaginationItem key={i} active={active}>
<PaginationLink
onClick={() => this.pageClick(i)}
>{i + 1}</PaginationLink>
</PaginationItem>
);
}
return pageButtons;That looks nice. We thank you for your cooperation and sharing the solution.
All the best.
I have problem with component: CustomInput, using the radio.
As you can see in your demo on this page the radio doesn’t work properly: https://gogo-react.coloredstrategies.com/app/applications/survey
Could you pass a solution?app/applications/survey
Hi,
There seems to be a misspelled category name and it makes custom inputs looks not working correctly.
If the problem you experience is related to there is no results when Workplace selected, please change “Worklplace” to “Workplace” in “categories” prop of “INIT_STATE” constant in src/redux/surveyList/reducer.js file.
hi, Not working: https://prnt.sc/qbtahw
Hi,
Here is a screenshot from the preview and it is built version of the project. https://ibb.co/mG7VBqy
I am not sure what is the cause for it, might be a browser issue? I have just tested with Chrome, Opera, Firefox and Edge. It works without a problem except the one misspelled category name but can not reproduce the problem you have.
I noticed that you have implemented a new language so I have also tried with Spanish version. It also works.
Let us know if you can provide more details about the issue.
